Share
Îmi plac icoanele sociale, o recunosc. Am literalmente zeci de seturi de pictograme sociale pe care le-am colectat în ultimii ani și chiar am creat câteva seturi ale mele pentru a încerca să ating acea potrivire perfectă pentru un anumit proiect.
Dar, în ultima vreme, am descoperit fonturi de pictograme și nu am mai folosit pictogramele vechi de imagine.
Imaginați-vă dingbats de toate felurile și stilul - icoane sociale, icoane pe site-ul web, orice vă puteți gândi - numai ele nu sunt imagini: ele sunt de fapt fonturi.
Asta e mare lucru pentru că, cu pictogramele de imagine, poți obține imagini statice. S-ar putea să obțineți câteva dimensiuni diferite ale aceleiași imagini, dar într-adevăr nu puteți face nimic cu ele decât să le utilizați așa cum este.
O icoană care este de fapt un font este un animal complet diferit. Deși este adevărat că pictogramele sunt mai simple, ele ajung la minimalism prin faptul că sunt foarte personalizabile. Cu un font de pictograme puteți schimba cu ușurință dimensiunea și culoarea pictogramei (la fel ca fonturile de text!). În plus, fonturile cu pictograme au fundaluri transparente care funcționează cu adevărat în versiunile anterioare ale Internet Explorer, dacă lucrează într-o versiune veche a IE este o considerație pentru dvs..
Un alt avantaj este că pot înlocui sprite de imagine CSS. Utilizarea unui font personalizat pentru pictograme cu un număr limitat de pictograme funcționează similar cu cele ale imaginilor sprite, dar vă oferă posibilitatea de a modela pictograme precum textul.
Indiferent dacă un font cu pictograme va funcționa mai bine decât pictogramele de imagini din proiectul dvs., este de ajuns să decideți; ambii au argumente pro și contra. Dar, pentru scopurile noastre, vom presupune că sunteți gata să încercați fonturile de pictograme și doriți să știți cum să le utilizați într-o temă WordPress.
Pentru tutorialul nostru, vom pune împreună un mic set de icoane pentru fonturi sociale pentru proiectul nostru ipotetic. Vom avea nevoie de icoane pentru Facebook, Twitter și Pinterest, deci să începem.
Există un număr mic de generatoare de fonturi online care vă permit să creați seturi de fonturi personalizate doar pentru dvs. Puteți crea fonturi personalizate pe baza unui proiect; este atât de convenabil! Aici vom folosi aplicația generator de la Icomoon, deoarece acesta este serviciul pe care l-am folosit cel mai frecvent.
Generatorul de fonturi al lui Icomoon este distractiv și ușor de utilizat - puteți alege dintr-un număr de fonturi icoane gratis, iar altele care sunt comerciale. Am găsit calitatea fonturilor pe care le oferă pentru a fi foarte ridicate. Puteți chiar încărca fonturile de pictograme pe care le găsiți în altă parte și le puteți utiliza în fontul personalizat. Foarte la îndemână.
Să construim fontul personalizat pentru pictograma social media. O să presupun că nu ați mai făcut-o niciodată înainte, dar nu vă faceți griji dacă aveți nevoie să mergeți înainte. Vom reveni.
Lansați aplicația Icomoon în browserul dvs. și acesta este ceea ce veți vedea:
Setul gratuit de fonturi Icomoon de bază este încărcat și puteți vedea și alte câteva fonturi gratuite pentru pictograme. Aș recomanda să aruncați o privire la celelalte seturi care nu au fost încărcate, de asemenea, deoarece puteți găsi ceva ce vă place acolo. Pentru a vizualiza celelalte seturi disponibile, derulați în partea de jos și faceți clic pe Mai multe seturi de pictograme.
Pe ecranul următor veți vedea o serie de alte fonturi gratuite și comerciale (Entypo este un set foarte frumos pe care îl folosesc frecvent, doar FYI). Pentru a adăuga oricare dintre acestea în fereastra principală de selecție, faceți clic pe Adăuga buton sub setul respectiv.
Odată ce v-ați întors pe ecranul principal și dacă doriți să eliminați un set, faceți clic pe pictograma de meniu din partea dreaptă sus a acestuia și apoi Eliminați Set.
Dacă aveți propriul font al pictogramei, poate unul obținut de la un client sau descărcat de pe un alt site, îl puteți încărca făcând clic pe Importați pictograme în partea de sus a ecranului de selecție și va încărca pictogramele în setul dvs. Puteți face selecții de fonturi din acest set la fel ca seturile de fonturi native Icomoon.
Pentru proiectul nostru, căutăm icoane sociale pentru Facebook, Twitter și Pinterest. Multe dintre seturile disponibile au unele sau toate aceste icoane, așa cum alegeți?
Alegerea tuturor icoanelor din același set este o soluție ușoară - dacă un set care vă place (și unul care se potrivește nevoilor de proiectare ale proiectului) are toate pictogramele de care aveți nevoie, minunat. Folosiți-le pe acestea. Uneori totuși nu este cazul - poate că setul pe care îl doriți nu are o pictogramă Pinterest, sau că YouTube este puțin cam veveritiv.
Dacă este cazul, alegeți și alegeți din seturi diferite, dar aveți grijă - Icomoon folosește o dimensiune de bază pentru fiecare dintre fonturile sale de pictograme; pentru setul Icomoon Free, dimensiunea grilei este de 16. Veți obține cele mai bune rezultate (aspectul cel mai clar) într-un browser atunci când setați dimensiunea fontului egală cu 16 sau cu un multiplu de 16.
Dacă vă uitați la pictograma fontului Entypo pe care am menționat-o mai devreme, veți vedea că dimensiunea sa de bază este de 20, ceea ce înseamnă că va trebui să setați dimensiunea fontului la 20 sau mai multe pentru a obține cele mai clare rezultate. Dacă doriți să amestecați pictograme din seturi de dimensiuni diferite ale rețelei de bază, va trebui doar să le verificați în browser pentru a vedea dacă calitatea afișării este acceptabilă. Puteți vedea dimensiunile rețelei pentru toate fonturile Icomoon făcând clic pe Vizualizați mai multe fonturi în partea de jos a ferestrei principale a aplicației.
Având în vedere această considerație, puteți utiliza instrumentul de căutare din partea de sus a aplicației pentru a căuta pictograme după nume, astfel încât să puteți compara mai multe versiuni ale aceleiași pictograme sociale împreună.
Desigur, puteți pur și simplu să răsfoiți seturile, ceea ce reprezintă o modalitate bună de a pierde o oră de timp.
Pentru a vă alege pictogramele, faceți clic pe ele. Acestea vor fi adăugate automat la setul dvs. Când ați terminat, faceți clic pe Font butonul din partea de jos și veți vedea toate pictogramele gata de descărcare. Apasă pe Descarca pentru a obține noul font personalizat perfect și veți vedea o casetă text în care puteți să vă numiți fontul - de obicei, îl numesc pentru client pentru a-i menține drept; în acest caz, o voi numi "tutorial".
Ce se întâmplă dacă faci acest font personalizat, apoi clientul decide că vrea să adauge, de exemplu, Vimeo și Instagram la linkurile lor de social media luna viitoare? Trebuie să începeți de la zero?
Nu, nu.
În descărcare va fi a selection.json fișierul care stochează toate setările proiectului. Tot ce trebuie să faceți este să deschideți aplicația Icomoon și faceți clic pe Importați pictograme pentru a încărca fișierul JSON, iar selecțiile dvs. vor fi afișate din nou. Veți adăuga noile pictograme, apoi veți recrea fontul și îl veți descărca din nou.
Acum ajungem la părțile semi-complicate.
Încărcați cele patru fișiere în / fonturi folder al fontului dvs. personalizat la un / fonturi în tema dvs..
Deschide style.css fișier în font personalizat și copiați-l @ Font-face fragmentul care arată astfel:
Accentsconagua
@ font-face font-family: 'tutorial'; src: url ( 'fonturi / tutorial.eot 6npck9?'); src: url ('fonts / tutorial.eot? # iefix6npck9') format (embedded-opentype), url ('fonts / tutorial.woff? 6npck9') format ('woff'), url ('fonts / tutorial. ttf? 6npck9 ') format (' truetype '), url (' fonts / tutorial.svg? 6npck9 # tutorial ') format (' svg '); font-weight: normal; font-style: normal; Apoi, în tema ta style.css fișier, lipiți acest fragment. Nu uitați să schimbați adresa URL unde fonturile vor fi în temă dacă utilizați altceva decât directorul "fonturi".
Există două metode principale pentru a face acest lucru; unul utilizează o clasă pentru fiecare pictogramă pentru a le adăuga ca pseudo-elemente (aceasta este cea pe care o folosesc), iar cealaltă folosește un atribut de date pentru a le adăuga ca elemente reale în HTML.
Iată un exemplu de utilizare a metodei clasă pe pictogramă într-o listă neordonată. Să presupunem că vom avea o funcție care plasează un șir de pictograme sociale în antetul temei dvs. - aceste capturi de ecran prezintă câteva exemple despre modul în care puteți utiliza acest.
Du-te în tema ta functions.php fișier și adăugați acest cod:
Apoi, reveniți în fișierul stil.css al fontului personalizat al pictogramei și copiați următorul fragment:
[class = "" icon- "], [class * =" icon- "] font-family: 'tutorial'; vorbesc: nici unul; font-style: normal; font-weight: normal; font-varianta: normal; text-transform: nici unul; linia-înălțime: 1; / * Better Font Rendering =========== * / -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: tonuri de gri; .icon-facebook: înainte de content: "\ e600"; .icon-twitter: înainte de content: "\ e601"; .icon-pinterest: înainte de content: "\ e602";
Inserați acest fragment în tema proprie style.css fişier. Dacă totul merge așa cum este planificat, ar trebui să aveți acum trei pictograme în antetul dvs. și puteți schimba culoarea, mărimea și alte atribute, la fel ca textul.
Uneori, Chrome are o problemă de redare a fonturilor pictogramelor - dacă arată în Chrome, încercați să le rearanjați @ Font-face acest fragment cu SVG după EOT:
@ font-face font-family: 'tutorial'; src: url ( 'fonturi / tutorial.eot 6npck9?'); src: url ('fonts / tutorial.eot? # iefix6npck9') format ('fonts / tutorial.svg? 6npck9 # tutorial' tutorial.woff? 6npck9 ') format (' woff '), url (' fonts / tutorial.ttf? 6npck9 ') format (' truetype '); font-weight: normal; font-style: normal; Cealaltă metodă de a obține pictograme în tema dvs. este prin utilizarea atributelor de date pentru a le insera ca elemente. Nu sunt un mare fan al acestei metode, deoarece înseamnă a pune pictograma în cadrul codului HTML în sine și mi-am dat seama că este mai confuz. Dar, aici mergem, vă puteți găsi o metodă mai mult decât cealaltă.
În functions.php, veți utiliza atribute de date precum:
Și în tema ta style.css:
[data-icon]: înainte de font-family: 'tutorial'; conținut: attr (date-icon); vorbesc: nici unul; font-weight: normal; font-varianta: normal; text-transform: nici unul; linia-înălțime: 1; -webkit-font-smoothing: antialiased;
Acum știți elementele de bază ale creării și utilizării fonturilor personalizate în tema WordPress - nu prea dificile. Găsiți niște icoane pe care le doriți și faceți o încercare în următorul proiect.
Iată câteva resurse pentru a face următorul pas. Cine știe; s-ar putea să vă aflați în momentul proiectării propriului font de pictograme, când nu puteți găsi fonturile potrivite pentru acel proiect.
Alte locuri pentru a genera fonturi personalizate:
Dacă doriți mai multe informații despre utilizarea atributelor de date, CSS Tricks are o imagine de ansamblu bună.
