• Passa alla navigazione principale
  • Vai al contenuto principale
  • Skip to sidebar primaria
  • Salta al Footer

TechLila

Bleeding Edge, sempre

  • Casa
  • Info
  • Contatti
  • Offerte e offerte
Logo Techlila
Condividi
Tweet
Condividi
Pino
1 azioni
Motori di gioco HTML5
Avanti il ​​prossimo

Crea il tuo gioco HTML5 con i motori di sviluppo HTML5

Font Awesome Iconico Font Exa

TechLila Web design e sviluppo

Caratteri delle icone: pro e contro di Font Awesome

Avatar di Rajesh Namase Rajesh Namase
Ultimo aggiornamento su: 19 Marzo 2018

I caratteri delle icone vengono utilizzati per includere determinate icone standard nel contenuto del tuo sito web. Il Carattere 'Fantastico' è un esempio particolarmente valido di questi che offre molti vantaggi rispetto ad altri caratteri di icone. Originariamente progettato da Dave Gandy per uso con Bootstrap di Twitter, Font Awesome può essere utilizzato con WordPress utilizzando il Plug-in Font Awesome Icons progettato da Rachel Baker.

Ecco una breve introduzione a tali caratteri e dove il carattere Awesome si inserisce in uno stile che potrebbe essere ancora agli inizi.

Perché usare i caratteri delle icone?

Quando si progetta un sito Web, le immagini occupano molto spazio Web a causa delle dimensioni dei file. Devono anche essere richiamati nelle tue pagine web utilizzando il markup HTML. Non solo, ma il loro ridimensionamento è spesso un problema, perdendo definizione man mano che aumentano di dimensioni. Un'immagine normale si risolve come previsto solo se utilizzata nelle dimensioni originariamente progettate.

Quando cerchi immagini di icone standard, ad esempio per veicoli, determinati caratteri di punteggiatura o icone di grafici, i caratteri delle icone possono offrirti immagini scalabili che hanno lo stesso aspetto indipendentemente dalle dimensioni del carattere. Questo è proprio come le lettere e i numeri appaiono uguali indipendentemente dal fatto che tu usi una dimensione del carattere 2 o 5 o una dimensione del carattere di 10 o 24 punti.

In molti casi, le persone semplicemente non usano le immagini a causa di questo problema e il loro articolo o rapporto online ne risente nei dettagli o nella chiarezza. Usando Font Awesome, possono aggiungere icone di base ai loro siti e ridimensionarli alla dimensione richiesta, limitata solo dalle dimensioni dei loro documenti, e possono farlo senza perdere la definizione. Puoi guardare le icone scalabili allo stesso modo dei caratteri dei caratteri scalabili.

Ecco una selezione del lettore video e delle icone social disponibili:

Font Fantastici esempi di font iconici

E anche le nuove icone fornite con la versione 3.0:

Nuove icone Carattere Fantastico carattere iconico

Ognuno di questi può essere aumentato di dimensioni senza perdita di definizione. Puoi cambiare il loro colore e aggiungere facilmente ombre e cambiare la loro trasparenza. In effetti puoi fare qualsiasi cosa con loro che puoi con le immagini, e poi alcune, senza gli svantaggi della dimensione del file.

Questo è fondamentalmente ciò che possono fare i caratteri delle icone, e in particolare il carattere Awesome. Ecco alcune informazioni su come usarli e sfruttarli al meglio, e anche uno o due svantaggi associati ai fronti delle icone:

Utilizzo di Font Awesome

Con CSS Bootstrap normale:

Font Awesome può essere utilizzato con il CSS predefinito di Bootstrap copiando la directory dei font Awesome nel progetto e quindi copiando font-awesome.min.css nel progetto. Devi quindi aprire font-awesome.min.css e modificare i percorsi dei caratteri per assicurarti che puntino alla posizione Awesome.

Nella sezione Head del tuo HTML la posizione del font-awesome.min.css dovrebbe essere referenziata in questo modo:


Il percorso del carattere è relativo dalla tua directory CSS.

Con Bootstrap Meno:

Se stai utilizzando Twitter Bootstrap con LESS CSS, copia prima la directory dei font Font Awesome nel tuo progetto e poi font-awesome-less nella tua directory Bootstrap Less. Quindi:

  • a) Apri bootstrap.less e sostituisci @import “sprites.less”; con @import “font-awesome.less”;
  • b) Apri il font-awesome.less del tuo progetto e modifica la variabile @FontAwesomePath in modo che punti alla directory dei tuoi font.
@FontAwesomePath: "../font";

Il percorso del carattere è relativo dalla directory CSS compilata.

Quindi sei pronto, anche se se stai usando un compilatore statico dovresti ricompilare LESS.

Non usando Bootstrap:

Se non stai usando Bootstrap, dopo aver copiato il file del font nella directory del tuo progetto puoi copiare uno dei due fantastici file di font nel tuo progetto, aprirlo e quindi modificare la posizione del font in modo che punti alla directory dei font.

Se stai utilizzando Internet Explorer 7, usa font-awesome-ie7.min.css

Come usare Font Awesome in WordPress

Ci sono due semplici modi per utilizzare i caratteri delle icone in WordPress uno in cui hai caricato il plug-in*. Puoi incorporarli utilizzando HTML o utilizzare lo shortcode. Ecco alcuni esempi di ciascuno:

Utilizzo dell'HTML: Dove vuoi che appaia il carattere, aggiungi semplicemente il nome dell'elemento al nome della classe in questo modo: [html] [/html]
aggiungerà un cerchio nero.

Puoi modificare la dimensione del cerchio in questo modo:


Probabilmente troverai più facile aggiungere la dimensione del carattere al tuo foglio di stile CSS se intendi utilizzare frequentemente la stessa dimensione dell'icona e il formato sopra per le eccezioni.

Utilizzo dello shortcode: Lo shortcode è più semplice, ma generalmente funzionerà solo per i contenuti dei post e delle pagine nella schermata dell'editor dei post. Il formato è [icon name=icon-circle] dove vuoi il cerchio.

Il rovescio della medaglia dei caratteri delle icone

I caratteri delle icone sembrano ottimi da usare quando hai bisogno di aggiungere un'icona specifica al tuo blog o sito web e possono essere collegati per svolgere funzioni specifiche. Tuttavia, non tutto è perfetto e anche i caratteri delle icone presentano degli svantaggi. Questi sono i problemi comuni segnalati dagli utenti di caratteri icona che non si applicano a Font Awesome - ecco perché è così "Fantastico!"

  1. Uno è il potenziale problema con gli screen reader che potrebbero leggere ad alta voce l'icona come una lettera alfabetica. Questo non è un problema con Font Awesome a causa del modo in cui vengono recuperati i caratteri dei caratteri.
  2. Possono essere presentati in un solo colore o in un gradiente di colore utilizzando i gradienti CSS3. È un vero problema con i caratteri delle icone?
  3. La creazione di un carattere personalizzato in base alle tue esigenze può richiedere tempo. Tuttavia, esiste già una vasta selezione di fantastici caratteri offerti da Font Awesome e l'elenco viene continuamente ampliato. Sebbene sia un font closed source gratuito, i font approvati progettati dagli utenti vengono aggiunti regolarmente.

Riepilogo generatore di caratteri fantastici

Il generatore di Font Awesome è uno dei migliori font di icone gratuiti attualmente disponibili. Sebbene sia stato progettato per l'uso con Twitter Bootstrap, può essere adattato per l'uso su normali siti Web ed è disponibile anche un plug-in WordPress che offre il meglio di questo carattere di icona. Se usi i caratteri delle icone, prova Font Awesome perché potresti essere piacevolmente sorpreso una volta che lo avrai padroneggiato.

* Il plugin Font Awesome Icons per WordPress è disponibile su https://github.com/rachelbaker/

Condividi
Tweet
Condividi
Pino
1 azioni

Disclosure: Il contenuto pubblicato su TechLila è supportato dal lettore. Potremmo ricevere una commissione per gli acquisti effettuati tramite i nostri link di affiliazione senza alcun costo aggiuntivo per te. Leggi il nostro Pagina disclaimer per saperne di più sui nostri finanziamenti, politiche editoriali e modi per sostenerci.

La condivisione è la cura

Condividi
Tweet
Condividi
Pino
1 azioni
Avatar di Rajesh Namase

Rajesh Namase

Rajesh Namase è un blogger professionista e fondatore del blog TechLila. Inoltre, è un appassionato imprenditore, internet marketer e maniaco del fitness.

Categoria

  • Web design e sviluppo

tag

Font Impressionante

Interazioni Reader

Cosa dicono di noi

  1. Avatar di Vivek Nath.RVivek Nath.R

    Nel mio blog sto usando il plugin per i font di Wp Exclusive Icon http://wordpress.org/extend/plugins/wp-elusive-iconfont/
    Il vantaggio è che ha più opzioni di personalizzazione come cambiare colore, dimensione, orientamento ecc. E ha anche molte altre icone. Controllalo.

    Rispondi
    • Avatar di Rajesh NamaseRajesh Namase

      Grazie Vivek per aver condiviso questo plugin per WordPress con i nostri lettori.

      Rispondi
    • Avatar di James DreesenJames Dresen

      Ehi Vivek, grazie per aver condiviso il plugin, sto cercando qualcosa del genere. Proverei anche Font Awesome Icons per vedere qual è quello che fa per me. Bell'articolo Rajesh, continua così! Tutto il meglio per te.

      Rispondi
      • Avatar di Rajesh NamaseRajesh Namase

        Prova anche a utilizzare il plugin Font Awesome per WordPress :)

        Rispondi
  2. Avatar di AndyAndy

    Ciao, stavo proprio cercando qualcosa del genere, dato che sono troppo pigro per creare tutte queste classi e aggiungere gli stili e le immagini al tema. Grazie!!

    Rispondi
  3. Avatar di VipinoVipin

    Grazie sia a Vivek che a Rajesh, entrambi hanno fornito le informazioni che stavo cercando.

    Rispondi
  4. Avatar di rohit chougalerohit chougale

    ciao rajesh

    'dimmi possiamo riprodurre video in php online se sì, allora dimmi come..

    Rispondi
    • Avatar di Rajesh NamaseRajesh Namase

      Puoi provare a utilizzare i tag video HTML 5 :) Ed è facile usare HTML 5 con PHP :)

      Rispondi
  5. Avatar di vaibhavVaibhav

    Aggiungo in modo difensivo questo plugin al mio acc..
    grazie amministratore..!

    Rispondi
  6. Avatar di Anand HittinaliAn e Hittinali

    beh, non sono un uomo di molte parole, quindi questo plugin mi è davvero d'aiuto. grazie per aver condiviso questo plugin.

    Rispondi
  7. Avatar di GiglioGiglio

    C'è un plugin per questa roba? Wow fantastico la prima volta che l'ho sentito. Grazie per aver condiviso questo.

    Rispondi
  8. Avatar di Mohsin AliMohsin ali

    Plugin molto interessante Rajesh da dove hai preso queste idee uniche.

    Rispondi
  9. Avatar di David CroftDavid Croft

    Ciao,
    grazie per questo bel blog, perché questo argomento "Icon Fonts" è molto nuovo per me, quindi posso conoscere molte cose nuove e nuove parole all'interno del tuo blog.
    Il generatore di font è davvero il miglior font di icone gratuito attualmente disponibile. quindi è molto utile.

    Rispondi
  10. Avatar di David JohnsonDavid Johnson

    Cordiali saluti, hai usato il termine "generatore di caratteri fantastici" ma il tuo articolo copre lo stesso carattere fantastico, non un generatore. La parola "generatore" ha un significato specifico nel contesto dei caratteri delle icone. Esempi di generatori di caratteri icona che supportano Font Awesome includono icnfnt e Fontello.

    Rispondi
    • Avatar di Rajesh NamaseRajesh Namase

      Ok, abbiamo aggiornato il titolo dell'articolo, grazie.

      Rispondi
  11. Avatar di CarltonCarlton

    Hai tralasciato uno svantaggio significativo dei caratteri delle icone: non si degradano con grazia. Tutti gli utenti che hanno disabilitato il download dei caratteri (perché sono attenti alla sicurezza, erano attenti alla sicurezza e dimenticati o sono stati configurati da qualcun altro che era attento alla sicurezza e non ne è a conoscenza) vedono solo brutti simboli glifi vuoti. Per essere un utente responsabile dei font di icone, devi accettare di gettare quegli utenti sotto un autobus.

    Rispondi
  12. Avatar di Ayush AgrawalAyush Agrawal

    Questo articolo sembra un po' vecchio, ma vorrei dire che un buon modo per usare font awesome è usare il suo cdn: //netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css .
    Aiuta i blogger che cercano di ridurre i tempi di caricamento.

    Rispondi
  13. Avatar di vikasVikas

    Bel post, Font Awesome è uno dei migliori sviluppi nel mondo del design.

    Rispondi
  14. Avatar di Mark FoxMark Fox

    Grazie per la condivisione. Sono più propenso a usarlo ora.

    Rispondi
  15. Avatar di Gaurav DuttGaurav Dutt

    Uomo! 2013, come ho potuto non averlo visto prima, ma ha comunque funzionato perfettamente per me. Grazie per questo.

    Rispondi

Aggiungi il tuo commento cancella risposta

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati con *

Sidebar primaria

Popolare

Come aumentare la velocità della banda larga su Windows

10 migliori lanciatori Android del 2021

Cose da fare dopo l'installazione di Windows 10 - Suggerimenti e trucchi per Windows 10

I 10 migliori motori di ricerca che puoi utilizzare per eseguire ricerche private sul Web

55 fatti interessanti sui computer che ti lasceranno a bocca aperta

Cosa cercare quando si acquista un laptop: una guida all'acquisto di laptop

Fusion Drive Vs SSD: cose che nessuno ti dice su Fusion vs SSD Storage

Strumenti Utili

· XNUMX€ Grammarly – Controllo grammaticale gratuito
· XNUMX€ SEMRush – Il miglior strumento SEO fidato dagli esperti
· XNUMX€ Setapp – Abbonamento unico per Mac e iOS

Argomenti di tendenza

  • Android
  • Internet
  • iPhone
  • Linux
  • Macintosh
  • Sicurezza
  • Social Media
  • Tecnologia
  • Windows

Vale la pena controllare

I 10 migliori equalizzatori audio per Windows 10 (edizione 2022!)

14 migliori skin VLC altamente consigliate e gratuite

Logo di piè di pagina Logo del testo del piè di pagina

footer

Info

Ciao e benvenuto su TechLila, il famoso blog di tecnologia dove puoi trovare articoli pieni di risorse per padroneggiare le basi e oltre.

In TechLila, il nostro obiettivo principale è fornire informazioni uniche, come suggerimenti e trucchi di qualità, tutorial, guide pratiche su Windows, Macintosh, Linux, Android, iPhone, sicurezza e alcuni argomenti secondari vari come le recensioni.

Link

  • Info
  • Contattaci
  • Disclaimer
  • Informativa sulla Privacy
  • Termini

Segui

Tema personalizzato utilizzando Genesis Framework

Hosting cloud di Cloudways

Lingua

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–2023 TechLila. Tutti i diritti riservati.