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:
Și, de asemenea, noile pictograme care vin cu versiunea 3.0:
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!”
- 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.
- 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?
- 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/
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.
Mulțumim Vivek pentru partajarea acestui plugin WordPress cu cititorii noștri.
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.
De asemenea, încercați să utilizați pluginul Font Awesome WordPress :)
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!!
Mulțumesc atât Vivek, cât și Rajesh, ambii au furnizat informațiile pe care le căutam.
salut Rajesh
„Spune-mi despre putem reda videoclipuri în php online, dacă da, apoi spune-mi cum...
Puteți încerca să utilizați etichete video HTML 5 :) Și este ușor să utilizați HTML 5 cu PHP :)
Adaug cu siguranță acest plugin la contul meu de wordpress.
multumesc admin..!
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.
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.
Foarte interesant plugin Rajesh de unde ai luat aceste idei unice.
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.
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.
Bine, am actualizat titlul articolului, mulțumesc.
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.
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.
Bună postare, Font Awesome este una dintre cele mai bune dezvoltări din lumea designului.
Mulțumesc pentru distribuire. Sunt mai înclinat să-l folosesc acum.
Om! 2013, cum aș putea să nu fi văzut asta până acum, dar să funcționeze impecabil pentru mine. Multumesc pentru asta.