• Treci la navigare primară
  • Salt la conținutul principal
  • Treci la bara laterală primară
  • Treci la subsol

TechLila

Bleeding Edge, întotdeauna

  • Acasa
  • Despre Noi
  • Contactați
  • Oferte și oferte
Logo Techlila
Distribuie
Tweet
Distribuie
Pin
1 Acțiuni
Motoare de jocuri HTML5
Urmeaza

Creați-vă propriul joc HTML5 cu motoarele de dezvoltare HTML5

Font Awesome Iconic Font Exa

TechLila Web Design și dezvoltare

Fonturi cu pictograme: avantaje și dezavantaje ale fontului Awesome

Avatarul lui Rajesh Namase Rajesh Namase
Ultima actualizare pe: Martie 19, 2018

Fonturile pentru pictograme sunt folosite pentru a include anumite pictograme standard în conținutul site-ului dvs. The Font „Awesome” este un exemplu deosebit de bun al acestora, care oferă multe avantaje față de alte fonturi de pictograme. Proiectat inițial de Dave Gandy Pentru utilizare cu Twitter Bootstrap, Font Awesome poate fi folosit cu WordPress utilizând Pluginul Font Awesome Icons proiectat de Rachel Baker.

Iată o scurtă introducere în astfel de fonturi și unde fontul Awesome se încadrează într-un stil care ar putea fi încă la început.

De ce să folosiți fonturi pentru pictograme

Când proiectați un site web, imaginile ocupă mult spațiu web datorită dimensiunilor fișierelor. De asemenea, acestea trebuie să fie apelate în paginile dvs. web utilizând marcaj HTML. Nu numai asta, dar scalarea lor este adesea o problemă, pierzându-și definiția pe măsură ce sunt mărite. O imagine obișnuită se rezolvă conform intenției numai atunci când este utilizată în dimensiunile proiectate inițial.

Când căutați imagini standard cu pictograme, cum ar fi pentru vehicule, anumite semne de punctuație sau pictograme grafice, fonturile pentru pictograme vă pot oferi imagini scalabile care arată la fel, indiferent de dimensiunea fontului. Acest lucru se întâmplă la fel cum literele și cifrele apar la fel, indiferent dacă utilizați dimensiunea fontului de 2 sau 5 sau de 10 sau 24 de puncte.

În multe cazuri, oamenii pur și simplu nu folosesc imagini din cauza acestei probleme, iar articolul sau raportul lor online suferă în detaliu sau claritate din cauza asta. Folosind Font Awesome, aceștia pot adăuga pictograme de bază pe site-urile lor și le pot scala la dimensiunea necesară, limitate doar de dimensiunile documentelor lor - și pot face acest lucru fără a pierde definiția. Puteți privi pictogramele scalabile în același mod ca și caracterele cu fonturi scalabile.

Iată o selecție a playerului video și a pictogramelor sociale disponibile:

Font Exemple minunate de fonturi iconice

Și, de asemenea, noile pictograme care vin cu versiunea 3.0:

Font iconițe noi Font iconic minunat

Fiecare dintre acestea poate fi mărită în dimensiune, fără pierderi în definiție. Puteți să le schimbați culoarea și să adăugați cu ușurință umbre și să le schimbați transparența. De fapt, puteți face orice cu ele puteți face cu imagini, și apoi unele, fără dezavantajele dimensiunii fișierului.

Acesta este, practic, ceea ce pot face fonturile cu pictograme și, în special, fontul Awesome. Iată câteva informații despre cum să le folosiți și să profitați cel mai bine de ele, precum și unul sau două dezavantaje asociate cu fronturile de pictograme:

Utilizarea fontului Awesome

Cu CSS Bootstrap normal:

Font Awesome poate fi folosit cu CSS Bootstrap implicit prin copierea directorului de fonturi Awesome în proiectul dvs. și apoi prin a face față font-awesome.min.css în proiect. Apoi, trebuie să deschideți font-awesome.min.css și să editați căile fonturilor pentru a vă asigura că indică către locația Awesome.

În secțiunea Head a HTML-ului dvs., locația font-awesome.min.css ar trebui să fie menționată astfel:


Calea fontului este relativă din directorul dvs. CSS.

Cu Bootstrap Less:

Dacă utilizați Twitter Bootstrap cu LESS CSS, apoi copiați mai întâi directorul de fonturi Font Awesome în proiectul dvs. și font-awesome-less în directorul dvs. Bootstrap Less. Atunci:

  • a) Deschideți bootstrap.less și înlocuiți @import „sprites.less”; cu @import „font-awesome.less”;
  • b) Deschideți font-awesome.less al proiectului dvs. și editați variabila @FontAwesomePath pentru a indica directorul de fonturi.
@FontAwesomePath: „../font”;

Calea fontului este relativă din directorul CSS compilat.

Atunci sunteți gata – deși dacă utilizați un compilator static, ar trebui să recompilați LESS.

Nu se utilizează Bootstrap:

Dacă nu utilizați Bootstrap, atunci după ce ați copiat fișierul cu fonturi în directorul proiectului, puteți copia oricare dintre cele două fișiere minunate cu fonturi în proiect, deschideți-l la sfârșit, apoi editați locația fontului pentru a indica directorul de fonturi.

Dacă utilizați Internet Explorer 7, atunci utilizați font-awesome-ie7.min.css

Cum să utilizați Font Awesome în WordPress

Există două moduri ușoare de a utiliza fonturile de pictograme în WordPress, una în care ați încărcat pluginul*. Le puteți încorpora folosind HTML sau folosiți coduri scurte. Iată exemple pentru fiecare:

Folosind HTML: Acolo unde doriți să apară fontul, adăugați pur și simplu numele articolului la numele clasei astfel: [html] [/html]
va adăuga un cerc negru.

Puteți modifica dimensiunea cercului astfel:


Probabil că veți găsi mai ușor să adăugați dimensiunea fontului în foaia de stil CSS dacă intenționați să utilizați frecvent aceeași dimensiune a pictogramei și formatul de mai sus pentru excepții.

Folosind Shortcode: Shortcode este mai ușor, dar în general va funcționa numai pentru conținutul postării și al paginii din ecranul editorului de postări. Formatul este [icon name=icon-circle] unde doriți cercul.

Dezavantajul fonturilor pentru pictograme

Fonturile de pictograme par grozave de folosit atunci când aveți nevoie să adăugați o pictogramă specifică blogului sau site-ului dvs. și pot fi conectate pentru a îndeplini anumite funcții. Cu toate acestea, nu totul este perfect, iar fonturile de pictograme au și dezavantaje. Acestea sunt problemele frecvente care sunt raportate de utilizatorii fonturilor de pictograme care nu se aplică pentru Font Awesome – de aceea este atât de „Genial!”

  1. Una este problema potențială cu cititoarele de ecran care ar putea citi cu voce tare pictograma ca o literă alfabetică. Aceasta nu este o problemă cu Font Awesome din cauza modului în care sunt preluate caracterele fontului.
  2. Ele pot fi prezentate doar într-o singură culoare – sau într-un gradient de culoare folosind gradienți CSS3. Este aceasta o problemă reală cu fonturile pentru pictograme?
  3. Poate dura timp pentru a crea un font personalizat care să se potrivească nevoilor dvs. Cu toate acestea, există deja o selecție mare de fonturi minunate oferite de Font Awesome, iar lista este în continuă extindere. Deși este un font sursă închis gratuit, fonturile aprobate concepute de utilizatori sunt adăugate în mod regulat.

Font Awesome Generator Rezumat

Generatorul Font Awesome este unul dintre cele mai bune fonturi de pictograme gratuite disponibile în prezent. Deși a fost conceput pentru a fi utilizat cu Twitter Bootstrap, poate fi adaptat pentru utilizare pe site-uri web obișnuite și există, de asemenea, un plugin WordPress disponibil care oferă tot ce este mai bun din acest font pictogramă. Dacă utilizați fonturi de pictograme, încercați Font Awesome, deoarece s-ar putea să fiți plăcut surprins odată ce l-ați stăpânit.

* Pluginul WordPress Font Awesome Icons este disponibil la https://github.com/rachelbaker/

Distribuie
Tweet
Distribuie
Pin
1 Acțiuni

Dezvaluirea: Conținutul publicat pe TechLila este susținut de cititor. Este posibil să primim un comision pentru achizițiile efectuate prin link-urile noastre de afiliat fără costuri suplimentare pentru dvs. Citește-ne Pagina de declinare a răspunderii pentru a afla mai multe despre finanțarea noastră, politicile editoriale și modalitățile de a ne sprijini.

Împărtășirea este Grijulie

Distribuie
Tweet
Distribuie
Pin
1 Acțiuni
Avatarul lui Rajesh Namase

Rajesh Namase

Rajesh Namase este un blogger profesionist și fondator al blogului TechLila. De asemenea, este un antreprenor pasionat, un agent de marketing pe internet și un pasionat de fitness.

Categorii

  • Web Design și dezvoltare

Tag-uri

Font Awesome

Interacțiuni de reader

Ce spun oamenii

  1. Avatarul lui Vivek Nath.RVivek Nath.R

    Pe blogul meu, folosesc pluginul pentru fonturi Wp Exclusive Icon http://wordpress.org/extend/plugins/wp-elusive-iconfont/
    Avantajul este că are mai multe opțiuni de personalizare, cum ar fi schimbarea culorii, mărimii, orientării etc. și, de asemenea, are o mulțime de alte pictograme. Verificați-l.

    răspuns
    • Avatarul lui Rajesh NamaseRajesh Namase

      Mulțumim Vivek pentru partajarea acestui plugin WordPress cu cititorii noștri.

      răspuns
    • Avatarul lui James DreesenJames Dreesen

      Hei Vivek, mulțumesc pentru partajarea pluginului, am căutat așa ceva. De asemenea, aș încerca Font Awesome Icons pentru a vedea care este cea potrivită pentru mine. Frumos articol Rajesh, te rog ține-o tot așa! Toate cele bune.

      răspuns
      • Avatarul lui Rajesh NamaseRajesh Namase

        De asemenea, încercați să utilizați pluginul Font Awesome WordPress :)

        răspuns
  2. Avatarul lui AndyAndy

    Bună, tocmai căutam așa ceva, deoarece îmi este prea lene să creez toate aceste clase și să adaug stilurile și imaginile în temă. Mulțumesc!!

    răspuns
  3. Avatarul lui VipinVipin

    Mulțumesc atât Vivek, cât și Rajesh, ambii au furnizat informațiile pe care le căutam.

    răspuns
  4. Avatarul lui Rohit Chougalerohit chougale

    salut Rajesh

    „Spune-mi despre putem reda videoclipuri în php online, dacă da, apoi spune-mi cum...

    răspuns
    • Avatarul lui Rajesh NamaseRajesh Namase

      Puteți încerca să utilizați etichete video HTML 5 :) Și este ușor să utilizați HTML 5 cu PHP :)

      răspuns
  5. Avatarul lui vaibhavvaibhav

    Adaug cu siguranță acest plugin la contul meu de wordpress.
    multumesc admin..!

    răspuns
  6. Avatarul lui Anand HittinaliAnand Hittinali

    Ei bine, nu sunt un om cu multe cuvinte, așa că acest plugin îmi este cu adevărat util. multumesc pentru partajarea acestui plugin.

    răspuns
  7. Avatarul lui LilyCrin

    Există un plugin pentru aceste lucruri? Wow grozav prima dată când îl aud. Vă mulțumim că ați împărtășit acest lucru.

    răspuns
  8. Avatarul lui Mohsin AliMohsin ali

    Foarte interesant plugin Rajesh de unde ai luat aceste idei unice.

    răspuns
  9. Avatarul lui David CroftDavid Croft

    Buna,
    mulțumesc pentru acest blog frumos, deoarece acest subiect „Fonturi de pictograme” este foarte nou pentru mine, așa că pot cunoaște multe lucruri noi și cuvinte noi în blogul tău.
    Generatorul de fonturi este într-adevăr cele mai bune fonturi de pictograme gratuite disponibile în prezent. deci este foarte util.

    răspuns
  10. Avatarul lui David JohnsonDavid Johnson

    Pentru informare, ați folosit termenul „generator Font Awesome”, dar articolul dvs. se referă la Font Awesome în sine, nu un generator. Cuvântul „generator” are o semnificație specifică în contextul fonturilor pictogramelor. Exemple de generatoare de fonturi de pictograme care acceptă Font Awesome includ icnfnt și Fontello.

    răspuns
    • Avatarul lui Rajesh NamaseRajesh Namase

      Bine, am actualizat titlul articolului, mulțumesc.

      răspuns
  11. Avatarul lui CarltonCarlton

    Ați omis un dezavantaj semnificativ al fonturilor pentru pictograme: nu se degradează cu grație. Toți utilizatorii care au dezactivat descărcarea fonturilor (pentru că fie sunt atenți la securitate, obișnuiau să fie atenți la securitate și au uitat, fie au fost configurați de altcineva care a avut grijă de securitate și nu sunt conștienți) doar văd simboluri urâte de glife goale. Pentru a fi un utilizator responsabil de font pictogramă, trebuie să acceptați să aruncați acești utilizatori sub un autobuz.

    răspuns
  12. Avatarul lui Ayush AgrawalAyush Agrawal

    Acest articol pare puțin vechi, dar aș dori să spun că o modalitate bună de a folosi font awesome este folosirea cdn-ului său: //netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css .
    Ajută bloggerii care doresc să reducă timpul de încărcare.

    răspuns
  13. Avatarul lui vikasVikas

    Bună postare, Font Awesome este una dintre cele mai bune dezvoltări din lumea designului.

    răspuns
  14. Avatarul lui Mark FoxMark Fox

    Mulțumesc pentru distribuire. Sunt mai înclinat să-l folosesc acum.

    răspuns
  15. Avatarul lui Gaurav DuttGaurav Dutt

    Om! 2013, cum aș putea să nu fi văzut asta până acum, dar să funcționeze impecabil pentru mine. Multumesc pentru asta.

    răspuns

Adaugă comentariul tău Anuleaza raspunsul

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Bara laterală primară

Popular

Cum să creșteți viteza de bandă largă pe Windows

Cele mai bune 10 lansatoare Android din 2021

Lucruri de făcut după instalarea Windows 10 – Sfaturi și trucuri pentru Windows 10

Top 10 motoare de căutare pe care le poți folosi pentru a căuta pe web în mod privat

55 de fapte interesante despre computer care vă vor uimi mințile

Ce să căutați atunci când cumpărați un laptop - Un ghid de cumpărare a unui laptop

Fusion Drive vs SSD – Lucruri pe care nimeni nu ți le spune despre Fusion vs SSD Storage

Instrumente utile

• Grammarly - Verificator gramatical gratuit
• SEMrush – Cel mai bun instrument SEO în care experții au încredere
• Setapp – Abonament unic pentru Mac și iOS

Subiecte de tendință

  • Android
  • Internet
  • iPhone
  • Linux
  • Macintosh
  • Securitate
  • Social Media
  • Tehnologia
  • ferestre din

Merită verificat

10 cel mai bun egalizator de sunet pentru Windows 10 (ediția 2022!)

14 cele mai bune skin-uri VLC care sunt foarte recomandate și gratuite

Footer Logo Logo subsol text

Subsol

Despre Noi

Bună ziua și bun venit la TechLila, celebrul blog tehnologic unde puteți găsi articole pline de resurse pentru a stăpâni elementele de bază și nu numai.

La TechLila, scopul nostru principal este să oferim informații unice, cum ar fi sfaturi și trucuri de calitate, tutoriale, ghiduri de utilizare pe Windows, Macintosh, Linux, Android, iPhone, Securitate și câteva sub-subiecte diverse, cum ar fi recenzii.

Link-uri

  • Despre Noi
  • Contactați-ne
  • Declinare a responsabilităţii
  • Politica de Confidențialitate
  • Termene

Urma

Tema personalizată folosind Genesis Framework

Găzduire în cloud de către Cloudways

Limba

en English
bg Българскиzh-CN 简体中文nl Nederlandsen Englishtl Filipinofr Françaisde Deutschid Bahasa Indonesiait Italianoja 日本語pl Polskipt Portuguêsro Românăru Русскийsr Српски језикes Españolsv Svenskatr Türkçeuk Українськаvi Tiếng Việt

© Copyright 2012–2022 TechLila. Toate drepturile rezervate.