piktogramma ko'rsatilmaydigan reaktsiya-fontawesome

I'm attempting to using react-fontawesome and implementing it in what seems to me to be exactly the same as the readme: https://github.com/danawoodman/react-fontawesome/blob/master/readme.md

import React from 'react';
import FontAwesome from 'react-fontawesome'
...
export default class ComponentName extends React.Component {
    render() {
        return (
            <div>
                <div>
                    
                        
                        SOME TEXT
                    
                </div>
                ...
            </div>
        )
    }
}

Lekin DOMda ikonani ko'rmayapman. Chrome Dev Tools'da ko'rsam-da:


which I feel like should be a tag. I tried changing the ... to an ... in "edit as HTML" in the dev tools and the icon still didn't show.

Mening plaginlarim va 2 bosqichda mening webpack.config-dagi oldindan o'rnatilgan modul-eksportlarim bor.

Biror narsani yo'qotganimni kimdir aytib berishi mumkinmi? Bu ishni bajarish uchun reaktiv-fontajadan boshqa birorta paket kerakmi? Standart shrift-awesome.css faylini yoki shriftni dahshatli CDN-ni yuklash kerakmi? Har qanday yordam katta rahmat, rahmat!

9
@Casey buni tekshirib ko'ring stackoverflow.com/a/44681641/5519872
qo'shib qo'ydi muallif Raaj Nadar, manba
Siz chindan ham shriftni kutib olishni xohlaysizmi yoki shunchaki index.html-da shriftni dahshatli qilishingiz kerak va odatdagidan foydalaning.
qo'shib qo'ydi muallif duwalanise, manba
Asosan, ikonka bor, yoki u erda hech qanday masofa bo'lmaydi. Men sizning kodingizni sinab ko'rdim, u men uchun juda yaxshi ishlaydi. CSS rang xususiyatini o'zgartirishni harakat qilib ko'ring.
qo'shib qo'ydi muallif DroidNoob, manba
duwalanise, afsuski, bu holda men reakt komponentida mavjud bo'lgan barcha narsaga muhtojman, ya'ni HTML-da shrift-awesome.min.css-ni yuklashning iloji yo'q.
qo'shib qo'ydi muallif Casey, manba
DroidNoob, bu belgi yo'q. Span tegini ko'rsatadigan belgi bilan ko'rsatib qo'yish mumkin, masalan, tegishli CSS-larni yuklab bo'lmaganda: class = fa fa-raket bilan span tegining belgisi ko'rsatilmaydi. CSS rang xususiyatini o'zgartirishga harakat qildim, hech narsa qilmadim.
qo'shib qo'ydi muallif Casey, manba

6 javoblar

Xuddi shu muammo bor edi. Readme.md saytini o'qib chiqing va siz buni ko'rishingiz mumkin. Eslatma:

Eslatma: Ushbu komponentda hech qanday shriftdan bahramand bo'lmaydigan CSS yoki shriftlar mavjud emas, shuning uchun ularni oxirigacha kiritishingiz kerak, yoki siz ularni qurish jarayoniga qo'shishingiz yoki <

CDN versiyalari .

Shunday qilib, eng oddiy usul html tilidagi jildli cdn bilan bog'lanishdir.

<head>
<meta charset="UTF-8">    
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" 
crossorigin="anonymous">
</head> 
12
qo'shib qo'ydi
Bu mening muammomni ham hal qildi.
qo'shib qo'ydi muallif Thomas Valadez, manba
Bu mening muammomni hal qildi! javob uchun juda ko'p rahmat
qo'shib qo'ydi muallif novembersky, manba

As the other answers mention, you need to include the icons in your page somehow. Check out the react-fontawesome example here: https://github.com/danawoodman/react-fontawesome/blob/master/examples/index.html

Ishlab chiquvchining 5-layn chizmada dahshatli CSS-ni o'z ichiga olganini ko'rishingiz mumkin.

On a separate note, Font Awesome v5 has been released, and you should consider moving to it. Read relevant docs here: https://www.npmjs.com/package/@fortawesome/react-fontawesome

V5 dan foydalanish uchun:

Bog'liqliklar o'rnatilsin:

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome
$ npm i --save @fortawesome/fontawesome-free-solid

Sizning komponentingiz quyidagi belgilarni ishlatishi mumkin:

import ReactDOM from 'react-dom';
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/fontawesome-free-solid'

const element = (
  
)

ReactDOM.render(element, document.body);

You can also build a library of commonly used icons in your app, for easy reference. Check out working code here: https://codesandbox.io/s/8y251kv448

More details about the library function available here: https://www.npmjs.com/package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently

7
qo'shib qo'ydi

Run npm install font-awesome --save

Sizning index.js yoki App.js yoki YourComponent.js ichida, kichkina CSS faylini import qiling.

import 'font-awesome/css/font-awesome.min.css';
4
qo'shib qo'ydi

@Alee ta'kidlaganidek, Fontaweome shriftlari paketga kiritilmagan. Buni o'zingiz import qilishingiz kerak bo'ladi.

  1. npm shriftning dahshatli to'plamini o'rnating. Agar npm ishlatsa npm shriftni o'rnatish -save yoki agar foydalanadigan ipni ishlatsangiz, ipni

  2. import less katalogida harflarning-awesome.less -ni import qilishingiz kerak. .siz "

Endi siz piktogrammalaringizni ko'rishingiz kerak :)

1
qo'shib qo'ydi

Try adding https://use.fontawesome.com/3bd7769ce1.js'> to your main index.html within your react project.

1
qo'shib qo'ydi
Bu hech qanday yaxshilik qilmaydi, bu Fontaunning React-versiyasi emas
qo'shib qo'ydi muallif Patrick Hund, manba

FontAwesome-ga kerakli CSS-ni import qilmaganligingizdan shubhalanaman - FontAwesome-ning veb-saytidan kichkina CSS-faylni yuklab oling va uni app.scss dosyanıza import qiling yoki boshqa uslublar sahifalarini import qilsangiz.

Reaktiv fonografiya kutubxonasi sizga yuqoridagi o'qituvchi nomlari kabi elementlarni yaratishga yordam beradi, ammo uslublar jadvalidan tashqari, sizning loyihangiz ushbu sinflarga mos belgilar mavjudligini bilmaydi.

0
qo'shib qo'ydi
ReactJS & ReactNative Uzbekistan
ReactJS & ReactNative Uzbekistan
81 ishtirokchilar

Guruh ReactJS va ReactNative bo'yicha muloqot qilish uchun ochilgan. Sizni qiziqtirsa: @nodejs_uz @react_uz @angular_uz @ngTashkent @yiiframework_uz @js_uzb @typescript_uzb @vuejs_uz @ngTashkent @laravel_uz @uzdevgroup Ish o'rinlari @UzDev_jobs