Share
Ogni vecchia icona è completa, 70 icone in tutto! Grazie a tutti coloro che hanno contribuito, puoi essere orgoglioso di aver partecipato all'icona più casuale sulla Terra! Per il resto di voi, ecco come scaricare e utilizzare il set ...
Questo non sarebbe stato così facile da realizzare senza il genio dell'app webfont di @ Keyamoon Icomoon. Il caricamento di una pila di SVG e l'emissione di un pacchetto webfont pulito e utilizzabile non è mai stato così facile! E sono molto felice di segnalare che Any Old Icon è ora presente nella libreria Icomoon per tutti da usare.
Scommetto che non hai voglia di usare questa icona nel tuo prossimo progetto, bene ecco come farlo ...
Per cominciare, vai alla pagina del progetto http://tutsplus.github.io/Any-Old-Icon/. Sfoglia le icone se lo desideri (aspetterò), quindi torna indietro e premi il grande pulsante di download.
Finirai con una cartella chiamata "Any-Old-Icon-Master", chiusa per gentile concessione di GitHub, che assomiglia un po 'a questo:
In esso troverai i file dei font, a index.html pagina web demo, a style.css file, alcune altre cose e una cartella "svg" che contiene tutta la grafica vettoriale originale.
Se desideri poter utilizzare i tipi di carattere in Photoshop, Illustrator e così via, fai doppio clic su .ttf File TrueType e sarà (dovrebbe) installare automaticamente sul tuo sistema, qualunque piattaforma tu stia usando.
Sarai quindi in grado di selezionare il carattere "any-old-icon" dall'applicazione di progettazione preferita. Andare fuori di testa.
La demo index.html file è ciò che Icomoon sforna automaticamente e illustra un paio di modi in cui è possibile utilizzare le icone webfont sul web. Dare un'occhiata al style.css e vedrai i bit e le bob necessari.
Per cominciare, il @ Font-face regole, che assegnano un nome di famiglia di font (any-old-icon) e indicano tutti i file di font che dovrai caricare su un server web. Assicurati che tutti i percorsi siano corretti, relativamente al file css.
Accentsconagua
@ font-face font-family: 'any-old-icon'; src: url ( 'font / qualsiasi-old-icon.eot'); formato src: url ('fonts / any-old-icon.eot? #iefix') ('embedded-opentype'), formato url ('fonts / any-old-icon.woff') ('woff'), url ('fonts / any-old-icon.ttf') formato ('truetype'), url ('fonts / any-old-icon.svg # any-old-icon') formato ('svg'); font-weight: normal; stile font: normale; Con quel set, ora puoi usare i file dei font in un paio di modi. Il prossimo pezzo di codice in style.css Somiglia a questo:
/ * Usa il seguente codice CSS se vuoi usare gli attributi dei dati per inserire le tue icone * / [data-icon]: before font-family: 'any-old-icon'; contenuto: attr (data-icon); parla: nessuno; font-weight: normal; font-variant: normal; Trasformazione del testo: nessuno; altezza della linea: 1; -webkit-font-smoothing: antialiased;
Imposta gli stili per utilizzare gli attributi dati, applicando uno pseudo-elemento a qualsiasi elemento della pagina che ha un attributo dati di Dati-icon. Ad esempio, potresti avere:
Questa estensione avrà a: before l'elemento applicato! In tal caso, il valore all'interno dell'icona dati, un'entità HTML (& # Xe039;) sarà iniettato nel: prima dell'elemento pseudo. La famiglia di caratteri any-old-icon viene applicata a questo: prima dell'elemento, quindi viene visualizzata l'icona corretta.
Il prossimo pezzo di CSS applica classi indifferenti per ogni icona (piuttosto una grossa porzione di codice). Quindi ogni classe ha un ulteriore stile, applicando lo pseudo elemento in un modo simile a prima, ma rappresentando le icone usando entità unicode escaped, che è necessario nei CSS.
.juan-ortiz-zaforas-plug-c-female: before content: "\ e01a";
Quello che si preferisce fare, anche se probabilmente comporta un piccolo successo nelle prestazioni, è quello di applicare la famiglia di font a un selettore globale come questo:
.icon font-family: 'any-old-icon';
Che quindi punta a quanto segue:
Un po 'di confusione nel markup, ma ehi.
Nota: quello aria-hidden = "true" è utile per nascondere il markup da screen reader e altre tecnologie assistive. Il personaggio ha poco significato senza l'icona, quindi potrebbe causare confusione.
Se preferisci usare caratteri diversi con queste icone, vai su Icomoon, usa Any Old Icon dalla libreria (o carica i file font forniti con la nostra fonte), quindi assegna i caratteri che desideri prima di scaricare il pacchetto.
Grazie ancora a tutti coloro che hanno partecipato! Se la tua icona non è arrivata al taglio finale, mi dispiace, ma ho la sensazione che ne faremo altri in futuro. Goditi il set di icone!
