Şriftin gözəl nümunələri. Font Awesome və IcoMoon: ikon şriftləri ilə işləyir. Simge şrifti nədir




Salam dostlar.

Bu gün “Dizayn” bölməsindən yeni məqalədir.

Bloqumu izləyənlər bilir ki, bir neçə gün əvvəl bloq dizaynını yeniləmişəm. Beləliklə, əks menyu elementləri və kateqoriyaları, eləcə də bəzi başlıqlarda, məsələn, məşhur və müzakirə olunan yazıların keçidi arasındakı nişanlarda, mətnin sonunda oxşar məqalələrin başlığının yanında və başlığın yanında gördüyünüz bütün nişanlar şərhlərin sayı, bunlar şəkillər deyil və xüsusi şrift Font Awesome ilə asanlıqla keyfiyyətli nişanlar yarada bilərsiniz.

Eyni şey şərhlərin, tarixlərin, baxışların sayının yanındakı kiçik nişanlara da aiddir.

Əksər hallarda bunu etmək üslubları yazmaqdan və hər dəfə bir şəkil göstərməkdən daha asandır. Nişanlar şriftlə göstərildiyindən və onların yerləşdirildiyi blokun ümumi üslublarına uyğun olduğundan hizalanma, rəng və s. üçün əlavə üslubları müəyyən etməyə də ehtiyac yoxdur.

Ümumiyyətlə, məsələ çox gözəldir. İlk sifarişlərimi verəndə bu ikonalarla rastlaşdım və onlar mənə çox narahat oldular. Mən sadəcə onlardan necə istifadə edəcəyimi bilmirdim və bəzi hallarda bu ikonları sadəcə şəkillərlə əvəz etdim. İndi onlardan istifadə etməkdə heç bir problem görmürəm. Sizə lazım olan tək şey Font Awesome şriftini sayta qoşmaq və sonra işarəni lazımi yerdə göstərmək üçün kodu əlavə etməkdir. Çox sadədir, gəlin buna praktikada baxaq.

Font Awesome nişanlarını veb saytınıza necə qoşmaq olar

2 əlaqə üsulu var:

  1. Simvol kitabxanasını xidmətin özündən birləşdirin, yəni. bulud saxlama tərəfində xidmətin saxladığı ikon faylına gedən yolu göstərin. Bu halda, səhifə hər dəfə yükləndikdə, bu fayl da yüklənəcək. Əvvəlcə məndə bu seçim var idi, lakin sonra gördüm ki, bu, səhifələrin yüklənməsini kifayət qədər ləngidir. Ona görə də ikinci varianta keçdim.
  2. Font Awesome ikona faylını rəsmi internet saytından yükləyin və onu adi üslub faylı kimi şablona qoşun. Sayt nəzərəçarpacaq dərəcədə sürətlənir.

Hər iki variantı daha ətraflı nəzərdən keçirək.

Seçim 1

Gəlin gedək Font Awesome rəsmi saytı və bulud yaddaşından fayl yükləmək üçün əlaqə kodu xəttini götürün. Sətir səhifənin birinci abzasında olacaq və mən də aşağıda onu təkrarladım.

< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Biz onu saytınıza sahələr arasında yerləşdiririk və bura daxil edirik. Əgər WordPress saytınız varsa, o zaman bu sahə Header.php faylında yerləşir.

Bu əlaqəni tamamlayır. Qalan hər şey bu səhifəyə keçin və müvafiq simvolu seçin. Bəyəndiyiniz simvolun üzərinə klikləyin və siz müxtəlif şrift ölçüləri ilə necə görünəcəyini başa düşməyiniz üçün müxtəlif ikona ölçüləri üçün seçimlər olan səhifəyə aparılacaqsınız. Simgeni göstərəcək kod da olacaq.

Bu kodu simvolu göstərmək istədiyimiz yerə yapışdırırıq.

Qeyd edək ki, bu daxiletmə metodu WordPress vidjet başlıqlarında işləmir. Əgər sadəcə olaraq ikon kodunu ifadədən əvvəl daxil etsəniz, o, oradan yox olacaq. Buna görə də Jquery-dən istifadə edərək başqa bir üsuldan istifadə etməlisiniz, bu barədə növbəti məqaləni hazırlayacağam.Orada da hər şey çox sadədir.

Kodu şablon fayllarına və ya bəzi mətn elementlərinə yerləşdirməlisiniz. Məsələn, məzmun daxiletmə sahəsinin özündə mətn vidcetində nişanlar işləyir. Məşhur və müzakirə olunan yazıların vidceti mənim üçün belə işləyir. Qalan nişanlar həm şablonun özünün, həm də plaginlərin tərtibatında yazılmışdır.

Seçim 2

Faylları olan qovluğu yükləyin buradan.

Bütün faylları bütün qovluqlarda və fayllarda mövzunun kökünə yükləyin. Mən yalnız bir xüsusi faylı və ya bütün qovluqları yükləməliydim, buna görə də arxivin içindəki hər şeyi endirdim.

Sonra CSS qovluğunda yerləşən font-awesome.min.css faylını daxil etməlisiniz. Biz aşağıdakı sətirdən istifadə edirik, sadəcə olaraq öz yolunuzu yazın (domen və mövzu adı). Biz onu birinci seçimlə eyni şəkildə yerləşdiririk - saytın başlığında.

< link rel = "stylesheet" href = "http://your domain/wp-content/themes/theme qovluq adı/css/font-awesome.min.css">

Veb saytlarının dizaynı ilə bir şey etməyi sevənlər üçün belə sadə, lakin son dərəcə faydalı bir materialdır. İndi şəkillərdən istifadə etmək, onları Photoshop-da azaltmaq, kəsmək və s. ehtiyac yoxdur. Sizə lazım olan tək şey Font Awesome şriftini birləşdirmək və onun imkanlarından istifadə etməkdir.

Simge rənglərinin dəyişdirilməsi

Nişanların rəngini dəyişdirmək lazımdırsa, bu da olduqca mümkündür və çətin olmayacaqdır. Hər bir ikona ümumi sinifə (.fa) və ikona adı ilə fərdi sinifə malikdir. Yuxarıdakı qələm işarəsi ilə nümunədə fərdi sinif aşağıdakı kimidir:

fa-qələm-kvadrat-o

< span class = "s" >fa - karandaş - kvadrat - o< / span >

Bu ikona üçün xüsusi rəng təyin etmək istəyirsinizsə, o zaman bu klassı öz stil faylınıza əlavə edin və içindəki rəngi, həmçinin ölçüsünü, şrift üslubunu və digər üslubları istədiyiniz kimi yazın. Nüans ondan ibarətdir ki, ikona əvvəlki psevdo-elementdə göstərilir, ona görə də məhz bu element üslublaşdırılmalıdır. Misal üçün:

Fa-qələm-kvadrat-o:əvvəl( rəng: #111; /*qara rəng*/ font-size:12px /*ikon ölçüsü 12 piksel en və hündürlükdə*/ )

Awesome vektor nişanları toplusudur. Daha doğrusu, hərf və rəqəmlərdən deyil, şəkillərdən ibarət şrift. Və bu şəkillər, mahiyyətcə bir şrift olduğundan, CSS üslublarından istifadə edərək dizayn edilə (dəyişdirilə), rəngini, ölçüsünü, kölgəsini və daha çoxunu təyin edə bilər. Razılaşdığınız çox əlverişlidir.

Font Awesome hazırda 1500-dən çox pulsuz ikonadan ibarətdir!

Awesome şriftini vebsaytda necə quraşdırmaq olar

Awesome şriftinin nişanlarından istifadə etmək üçün veb saytınıza bir sıra şrift və üslublar yükləməlisiniz. Bunun üçün rəsmi internet saytına - https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself səhifəsinə keçin və düyməni sıxaraq arxivi endirin.

İndi bölmələrə qoşulun saytınızın Möhtəşəm üslubları:

Awesome şriftləri birləşdirməyin alternativ yolu

Veb saytınıza heç nə köçürmək lazım deyil, ancaq CDN şəbəkəsindən bütün məlumatları endirin. Bunun üçün bölməyə aşağıdakı kodu əlavə etməlisiniz :

Bu həllin üstünlüyü saytın daha sürətli sürəti olacaq, çünki məlumatlar paralel olaraq müxtəlif serverlərdən (hostinqinizdən sayt və Awesome şəbəkəsindən şriftlər) yüklənəcək, üstəlik, şriftlər artıq yaddaşda saxlanıla bilər. istifadə olunduğu saytları əvvəllər ziyarət etmisinizsə brauzer.

İşin mənfi tərəfi ondan ibarətdir ki, o, oflayn saytlarda (İnternet çıxışı olmayan) istifadə edilə bilməz və Awesome CDN şəbəkəsindən asılıdır. Ona görə də adətən birinci üsuldan istifadə edirəm.

Veb saytında zəhmli şriftlərdən necə istifadə etmək olar

Veb saytınızdakı şriftləri birləşdirdikdən sonra veb səhifənizə iki yolla Awesome nişanlar əlavə edə bilərsiniz:

  1. elementlər üçün müvafiq siniflər təyin edin ;
  2. psevdo elementlərdən istifadə edərək istədiyiniz elementə əlavə edin :əvvəl, :sonra və müvafiq əmlak dəyəri məzmun.

Awesome şriftlərdən istifadə nümunəsi

Saytlardan biri üçün aşağıdakı kodu istifadə etdim (element istifadə edilmiş şrift üslubları zəhmli versiya 4.7.0):


Kompüter avadanlığının və proqram təminatının təchizatı

CCTV və videomüşahidə sistemlərinin tikintisi

Girişə nəzarət və idarəetmə sistemlərinin inkişafı

LAN/SCS və telefoniyanın layihələndirilməsi və quraşdırılması

Brauzerdə nəticə belə görünür:

Sayt üçün zəhmli nişanları harada görmək olar

Klaviatura düymələrinizdə hərflər və rəqəmlər çap olunursa və onların istifadəsi heç bir çətinlik yaratmırsa, zəhmli şriftlərlə bağlı bir sual var: ikon kodu ilə onun qrafik təsviri arasındakı yazışmaları necə tapmaq olar. Məsələn, simvolu göstərmək üçün hansı HTML kodundan istifadə etmək lazımdır Android?

Bunu öyrənmək üçün rəsmi veb saytına daxil olun - https://fontawesome.com/icons?d=gallery&m=free

Məsələn, bir şəkil Android Aşağıdakı kod uyğun gəlir:

Ekranda belə görünür:

Awesome şriftlərinin hansı versiyasını saytda istifadə etmək daha yaxşıdır?

Möhtəşəm şrift daim inkişaf edir, ona müntəzəm olaraq yeni nişanlar və onların dizayn variantları əlavə olunur. Yazı zamanı şriftin 5-ci versiyası aktualdır. Ancaq veb saytınızda əvvəlki nəşrlərin 4.7.0 və ya hətta 3.2.1-dən etibarlı şəkildə istifadə edə bilərsiniz. Bunu etmək üçün səhifələrə daxil olun

Nişanlar psevdo-sinifdən əvvəl ::vasitəsilə göstərilir, ona görə də hər hansı elementə sadəcə simvolun adı olan bir sinif əlavə etməlisiniz. Element adətən istifadə olunur , lakin hər hansı digər daxili elementdən istifadə edə bilərsiniz, məsələn: , və s.

üçün iki əsas sinif göstərilir - fa və fa-icon, burada ikona əvəzinə simvolun adı yazılır. Bütün adlar bu səhifədə mövcuddur.

düyü. 1. Video pleyer üçün nişanlar

Play adlı ikona əlavə etmək üçün aşağıdakı kodu yazın:

Elementin özü boş və səhifədə işarənin tələb olunduğu yerə daxil edilir. Onun ölçüsü cari mətnin ölçüsünə uyğundur.

Biz font-size xassəsindən istifadə edərək dəstdən istənilən ikonanın ölçüsünü dəyişə bilərik, onu öz üslubumuzda əvəz edə bilərik. Font Awesome həmçinin əvvəlcədən hazırlanmış beş ölçü təklif edir. Elementə əlavə sinif əlavə etmək kifayətdir nümunə 1-də göstərildiyi kimi.

Nümunə 1. Nişan ölçüsü

Şrift Əla

Orijinal ölçü

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

Bu nümunənin nəticəsi Şəkildə göstərilmişdir. 2.

düyü. 2. Nişan ölçüləri

Rənglər

Nişan mətn simvolu olduğundan ona mətnin dizaynını təyin edən rəng, fon, mətn kölgəsi və digər üslub xüsusiyyətləri tətbiq olunur. Misal 2 nişanların görünüşünü dəyişdirmək üçün bəzi variantları göstərir.

Nümunə 2. Üslublardan istifadə edərək nişanların layihələndirilməsi

Şrift Əla

Bu nümunənin nəticəsi Şəkildə göstərilmişdir. 3.

düyü. 3. Rəngli nişanlar

Font Awesome xüsusi sinif fa-inverse təqdim edir ki, bu da nişanların rəngini ağa dəyişdirir, buna görə də kitab ikonasının üslublarında rəng göstərilmir.

Nişanları fırladın

Nişanlar saat əqrəbi istiqamətində 90, 180 və ya 270 dərəcə fırlana bilər və üfüqi və ya şaquli olaraq çevrilə bilər. Bunun üçün aşağıdakı siniflərdən istifadə olunur:

  • fa-rotate-90 - saat yönünde 90º döndərin;
  • fa-rotate-180 - 180º döndərmək;
  • fa-rotate-270 - 270º fırlanma;
  • fa-flip-horizontal - üfüqi əks;
  • fa-flip-vertical - şaquli çevirmək.

Nəzərə almaq lazımdır ki, bütün nişanların fırlanması və əks olunması mənası yoxdur, nəticə asimmetrik nişanlar üçün nəzərə çarpacaq (nümunə 3).

Misal 3: Nişanları fırladın və çevirin

Şrift Əla

Bu nümunənin nəticəsi Şəkildə göstərilmişdir. 4. Birinci təyyarə nişanı orijinal formada göstərilir, ikincisi 90º fırlanır, üçüncüsü isə üfüqi şəkildə əks olunur.

düyü. 4. Nişanların çevrilməsi

Animasiya

Animasiya adətən gerilim effekti yaratmaq üçün istifadə olunur. Nişanlar iki yolla sonsuz olaraq saat əqrəbi istiqamətində fırlanmaq üçün edilə bilər. Fa-spin sinfi hamar fırlanma yaradır, fa-nəbz sinfi isə addım-addım fırlanma yaradır. Aşağıda bir futbol topunun fırlanması göstərilir.

Nişanların birləşdirilməsi

Adi ekrana əlavə olaraq, nişanlar bir-biri ilə birləşdirilə bilər. Bunu etmək üçün bir element yaradın

fa-stack sinfi ilə və biz artıq ona istədiyiniz nişanları daxil edirik. Əvvəlcə alt, sonra yuxarı gəlir. Fa-stack-1x və ya fa-stack-2x sinifləri hansı ikonanın ölçüsünün daha böyük olmasından asılı olaraq nişanların özlərinə əlavə edilir. Kodun əsas strukturu aşağıda göstərilmişdir.

Əziz oxucular, salamlar! Uzun müddətdir ki, şrift haqqında danışmağı planlaşdırıram, onu layihələrimdə fəal şəkildə istifadə edirəm və bu gün onun lehinə bir neçə arqument verəcəyəm.

Əgər siz hələ də saytda kiçik qrafik elementlər üçün rastr şəkillərindən istifadə edirsinizsə, onda mən sizi məyus etməliyəm - yükləyərkən serverə əlavə http sorğuları yaradırlar və miqyaslandırdıqda aydınlığını itirirlər.

Əvvəllər sorğuların sayını azaltmaq üçün qrafik dizayn elementlərini birləşdirdim. Saytın yükləmə sürətini optimallaşdırmaq üçün bu həll bu gün də aktualdır. Lakin miqyas problemi bu şəkildə həll edilmir və təsvirlər böyüdüldükdə cəlbedici görünüşünü itirir.

Mükəmməl miqyas alan və yüksək ayırdetmə ekranlarında əla görünən böyük vektor nişanları dəsti ehtiva edir! Onlar saytın hər yerində istifadə olunur: axtarış formasında, kateqoriyalar siyahısında, məqalənin dərc olunduğu tarixə yaxın yerlərdə, həmçinin sosial şəbəkə düymələrində və digər dizayn elementlərində.

Simge şriftlərinin üstünlükləri və mənfi cəhətləri

Ənənəvi təsvirlər veb-sayt dizaynının qrafik elementləri kimi çoxdan özünü doğrultmuşdur, müasir dövrdə onlar tədricən CSS3, SVG-nin yeni funksiyaları və nişanları olan şriftlərlə əvəz olunur.

Onların populyarlığının səbəbi nədir? Konfiqurasiyanın çevikliyi, quraşdırma və layihədə istifadənin asanlığı həlledici rol oynadı. Əsas üstünlüklər:

  • Kolleksiyada sayt üçün 500-dən çox pulsuz vektor nişanı var.
  • Nişanlar keyfiyyətini itirmədən istənilən ölçüdə ölçülür.
  • CSS ilə üslub - şrift ölçüsü, rəng və digər xüsusiyyətlər.
  • Brauzer dəstəyinin aktivləşdirilməsini tələb etmir.
  • Çarpaz brauzer uyğunluğu (IE7 və daha yüksək), mobil brauzerlər üçün dəstək.

Üstünlüklərlə yanaşı, mənfi cəhətləri də qeyd etmək lazımdır, təəssüf ki, onlar da mövcuddur, lakin onlar olduqca azdır:

  • Müxtəlif brauzerlərdə eyni olan şəkillərdən fərqli olaraq, şriftlər brauzerdən və əməliyyat sistemindən asılı olaraq fərqli görünə bilər.
  • Dizaynerlər əhəmiyyətli sayda nişanlar üzərində ətraflı işləmişlər, lakin layihəniz üçün lazım olanı tapa bilməyəcəyiniz ehtimalı var.

Font Awesome şriftini necə bağlamaq olar

Şrifti birləşdirməyin ilk və ən asan yolu onu bölməyə daxil edərək xarici CDN-dən yükləməkdir. aşağıdakı xətt:

<"https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

İkinci üsul, hostinqinizdə Font Awesome şriftini əl ilə quraşdırmaqdır. Arxivi rəsmi internet saytından yükləyin, serverdəki css və şrift qovluqlarını açın və font-awesome qovluğunda saxlayın. Eyni şəkildə bağlanır, yalnız faylın yolunu dəyişdirir:

<link rel = "stil cədvəli" href = "../font-awesome/css/font-awesome.min.css">

Veb saytınızda Font Awesome nişanlarından necə istifadə etmək olar

Səhifəyə ikona daxil etmək üçün aşağıdakı kimi hərəkət edin: saytda istədiyiniz ikonanı tapın və kodunu kopyalayın, sonra onu HTML rejimində yapışdırın:

sinif="fa fa-twitter" > i>

Layihənin rəsmi saytında sənədlər və əlavə istifadə nümunələri var.

Bəzən sayt elementləri dinamik şəkildə, məsələn, PHP funksiyası ilə formalaşır və HTML-ni redaktə etmək üçün birbaşa imkan yoxdur, sonra CSS seçicilərində psevdo-siniflər istifadə olunur.

Nümunə olaraq kateqoriya vidcetindən istifadə edərək bunu necə edəcəyinizi sizə göstərəcəyəm. Mənbə kodu parçasına baxın:

<div class = "widget_title" > Bloq kateqoriyalarıdiv > <ul > <li class="cat-item cat-item-5" > <a href = "/kateqoriya/wordpress/" > WordPressa > li > ul >.cat-item :before (məzmun : "\f07c" ; şrift ailəsi : FontAwesome; rəng :#393 ; padding-sağ :10px )

Məzmun xüsusiyyəti Unicode simvol cədvəlinin hex kodundan ikona yaradır, onu ikona ilə səhifədə tapa bilərsiniz:

Unicode \f07c daha sonra öz siniflərimizi tərtib etmək üçün istifadə etdiyimiz istədiyiniz ikonanın hex koduna tam uyğundur.

Bu, qısa icmalı bitirir; hər hansı bir sualınız varsa, şərhlərdə soruşun. Saytınızda Font Awesome nişanlarından, bəlkə də fərqli şriftdən istifadə edirsiniz?

CDN Font Awesome saytınızda və ya tətbiqinizdə və yalnız bir kod sətri ilə Font Awesome istifadə etməyə başlamağın ən asan yoludur. Heç bir şey yükləmək və ya quraşdırmaq lazım deyil.

Biz hər bir sayt üçün hər bir nişan dəstini fərdi olaraq yaradırıq ki, bu da sizə ikonaları tez və lazımsız əngəl olmadan dəyişməyə imkan verəcək. Həmçinin, bu e-poçt ünvanından istifadə edərək, hansı nişanlar dəstinin sizə aid olduğunu müəyyən edə bilərik, yəni siz dəstlərinizi idarə edə bilərsiniz.

Sayt üçün nişanlar. Sürətli.

Serverinizdəki fayllara vaxt itirməyə ehtiyac yoxdur. Siz bütün 675 ikona və üslub dəstlərini əldə edəcəksiniz - hamısı sürətli yükləmə üçün optimallaşdırılıb.

Asan yeniləmələr

Hər bir saytın özünəməxsus nişanlar dəsti olacağı üçün siz kodda heç bir dəyişiklik etmədən onu asanlıqla yeniləyə bilərsiniz. Möhtəşəm =).

Və ya

Qabaqcıl fərdiləşdirmə Asan

CSS-dən istifadə

  1. Aşağıdakı kodu etiketə yapışdırın veb saytınızın HTML koduna daxil edin.

    "path/to/font-awesome/css/font-awesome.min.css">

  2. Nümunələrə baxın

Sass və ya Az istifadə

LESS və ya SASS istifadə edərək Font Awesome 4.7.0-ı fərdiləşdirmək üçün bu üsuldan istifadə edin.

  1. Bütün font-awesome qovluğunu layihə qovluğunuza kopyalayın.
  2. Layihənizdə font-awesome/less/variables.less və ya font-awesome/scss/_variables.scss fayllarını açın və şriftləri olan qovluğa işarə etmək üçün müvafiq olaraq @fa-font-path və ya $fa-font-path redaktə edin.

    @fa-font-path : "../font" ;

    Şriftlər qovluğuna gedən yol tərtib edilmiş css qovluğuna nisbətən olmalıdır.

  3. Kompilyatordan istifadə edərək LESS və ya SASS fayllarınızı tərtib edin. Hər şey işləməlidir.
  4. Font Awesome ilə başlamaq üçün nümunələrə baxın!

Və ya

Qabaqcıl səviyyəli Pro

  1. Bu sətri tətbiqinizin Gemfaylına əlavə edin:

    gem "şrift-zəhmli-az"

  2. Növbəti qaçış:

    $paket

  3. Və ya əl ilə quraşdırın:

    $ gem install font-awesome-az

Əgər siz Rails istifadə edirsinizsə, o zaman aşağıdakı kodu, məsələn, application.less faylına yapışdırın:

  1. Layihənizin Gemfaylına aşağıdakı sətri əlavə edin:

    gem "font-awesome-sass"

  2. Növbəti qaçış:

    $paket

  3. Və ya əl ilə quraşdırın:

    $ gem install font-awesome-sass

Əgər siz Rails istifadə edirsinizsə, o zaman aşağıdakı kodu, məsələn, application.scss faylına yapışdırın:

@import "font-awesome-sprockets" ; @import "font-awesome" ;

əlavə informasiya

Validatorlar

Köhnə və qüsurlu brauzerlərdə ən yaxşı nəticələri təmin etmək üçün Font Awesome bəzi hallarda brauzerlərdə nasazlıqları və səhvləri keçmək üçün CSS hacklərindən istifadə edir. Təbii ki, bu sındırmalar kod validatorlarda yoxlanıldıqda xəbərdarlıqlara səbəb olur. Həmçinin, Font Awesome hələ tam standartlaşdırılmamış, lakin yalnız mütərəqqi təkmilləşdirmə üçün istifadə edilən bir neçə vəziyyətdə yeni CSS xassələrindən istifadə edir.

Təcrübədə, bu validator xəbərdarlıqları əhəmiyyətsizdir, çünki əksər CSS hacksiz işləyir və müvafiq olaraq istifadə edilmədiyi sahələrə kömək etmir. Biz bu xəbərdarlıqlara məhəl qoymuruq.

Internet Explorer 8 və @font-face

IE8-də psevdo-element ilə birlikdə istifadə edildikdə @font-face ilə bağlı bir neçə problem var. Font Awesome məhz belə kombinasiyadan istifadə edir. Əgər siçan kursoru brauzer pəncərəsi üzərində hərəkət etmədən səhifə keşlənirsə və ya yüklənirsə (məsələn, “yenilə” düyməsini kliklədikdə və ya çərçivə vasitəsilə məzmunu yükləyərkən), o zaman səhifə şrift yüklənməmişdən əvvəl yaradılacaq. Siçanı səhifənin (bədənin) üzərinə gətirmək bəzi nişanları göstərməlidir, yüklənməmiş nişanların qalan hissəsinə keçmək də onları canlandıracaq. bu problem.