Share
Orice pictogramă veche este completă, în total 70 de icoane! Vă mulțumim tuturor celor care au contribuit, puteți fi mândri că ați participat la cea mai aleatoare pictogramă pe Pământ! Pentru ceilalți, iată cum să descărcați și să utilizați setul ...
Acest lucru nu ar fi fost atat de usor de realizat fara geniul aplicatiei webfont Icomoon @ Keyamoon. Încărcarea unei grămezi de SVG-uri și ieșirea ca un pachet webfont ușor de utilizat nu a fost niciodată mai ușor! Și eu sunt foarte fericit să raportez că Any Old Icon este prezentată în biblioteca Icomoon pentru ca toată lumea să o folosească.
Pun pariu că vă înnebuniți să utilizați această pictogramă setată în următorul dvs. proiect, așa cum să faceți acest lucru ...
Pentru inceput, mergeti pe pagina proiectului http://tutsplus.github.io/Any-Old-Icon/. Răsfoiți icoanele dacă doriți (aștept), apoi mergeți înapoi și apăsați butonul mare de descărcare.
Veți termina cu un dosar numit "Any-Old-Icon-Master", cu zâmbet până la GitHub, care arată cam așa:
În el veți găsi fișierele de fonturi, un index.html pagina web demo, a style.css fișier, alte chestii și un dosar "svg" care conține toate lucrările de artă originale.
Dacă doriți să puteți utiliza fonturile în Photoshop, Illustrator și așa mai departe, faceți dublu clic pe .ttf Fișierul truetype și va (ar trebui) să se instaleze automat în sistemul dvs., indiferent de platforma pe care o utilizați.
Apoi, veți putea selecta fontul "oricare dintre vechile pictograme" din aplicația dvs. de design preferată. A înnebuni.
Demo-ul index.html fișierul este ceea ce Icomoon creează automat și ilustrează câteva moduri în care puteți utiliza icoane webfont pe web. Aruncăm o privire la style.css și veți vedea biții și bobii necesari.
În primul rând, @ Font-face care atribuie un nume de familie de fonturi (pictograma vechi) și indică toate fișierele de fonturi pe care va trebui să le încărcați pe un server web. Asigurați-vă că toate căile sunt corecte, în raport cu fișierul css.
Accentsconagua
@ font-face font-family: "orice-vechi-icon"; src: url ( 'fonturi / orice-vechi-icon.eot'); src: url ('fonts / any-old-icon.eot? #iefix') format (embedded-opentype) ('fonts / any-old-icon.ttf') format ('truetype'), url ('fonts / any-old-icon.svg # any-old-icon'); font-weight: normal; font-style: normal; Cu acest set, puteți utiliza fișierele de fonturi în câteva moduri. Următoarea bucată de cod din style.css arata asa:
/ * Utilizați următorul cod CSS dacă doriți să utilizați atributele de date pentru introducerea pictogramelor * / [pictograma de date]: înainte de font-family: 'any-old-icon'; 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;
Acesta stabilește stilurile pentru a folosi atributele de date, aplicând un pseudo-element unui element din pagina dvs. care are un atribut de date al date-icon. De exemplu, este posibil să aveți:
Acest interval va avea un: înainte ca elementul să fie aplicat! În acest caz, valoarea în cadrul pictogramei de date, o entitate HTML (& # Xe039;) va fi injectat în: înainte de pseudo element. Familia fontului pentru orice pictogramă veche este aplicată la aceasta: înainte de element, astfel încât să fie afișată pictograma corectă.
Următoarea bucată de CSS aplică clase indviduale pentru fiecare pictogramă (o bucată destul de mare de cod). Apoi, fiecare clasă are un stil suplimentar, aplicând elementul pseudo într-un mod similar celui anterior, dar reprezentând pictogramele folosind entități unicode care au fost scoase, ceea ce este necesar în CSS.
.juan-ortiz-zaforas-plug-c-feminin: înainte de conținut: "\ e01a";
Ceea ce preferați să faceți, cu toate că, cu siguranță, provoacă un mic succes, este să aplicați familia font-urilor unui selector global cum ar fi:
.pictograma font-family: "orice-vechi-pictogramă";
Care apoi indică următoarele:
Elimină ușor marcajul, dar hei.
Notă: acea arie-ascuns = "true" este util pentru ascunderea marcajului de la cititori de ecran și alte tehnologii de asistență. Personajul are un înțeles mic fără icoană, astfel încât ar putea provoca confuzie.
Dacă preferați să folosiți caractere diferite cu aceste pictograme, mergeți direct pe Icomoon, utilizați orice pictogramă veche din bibliotecă acolo (sau încărcați fișierele de fonturi furnizate cu sursa proprie), apoi alocați oricare ar fi caracterele dorite înainte de a descărca pachetul.
Vă mulțumim din nou tuturor celor care au participat! Dacă pictograma dvs. nu a făcut-o în tăietura finală, îmi pare rău, dar am sentimentul că vom fi difuzate mai multe în viitor. Savurați setul de pictograme!
