Tempo di lettura stimato: 3 minuti

A volte su internet incappo in alcune soluzioni geniali, che risolvono in pochi click un lavoro che altrimenti durerebbe alcuni minuti (si, ok, stiamo parlando di minuti, ma è sempre un risparmio di tempo). Le risorse che vi segnalo oggi (tratte dal blog inglese SixRevisions) sono semplici font, i cui caratteri consistono in icone monocromatiche pronte da includere nel web (con la regola CSS “@font-face“), una tecnica in uso da qualche tempo, ma che a stento vedo applicata.

I benefici derivanti dall’uso di questa tecnica possono essere riassunti così:

• E’ una soluzione cross-browser (vengono supportati la maggior parte dei browser, perfino IE6),
• L’icona può essere riscalata al volo cambiando un parametro nello stile del font,
• Il colore può essere cambiato altrettanto velocemente sempre cambiando lo stile dell’elemento,
• E’ possibile aggiungere ulteriori effetti tramite proprietà CSS (per esempio “text-shadow” e “gradient“).

Tutti quelli che seguono sono font con licenze diverse, ma utilizzabili anche per scopi commerciali.

1. Foundation Icon Font

Icone: 137 // Licenza: MIT (open source)

2. Sosa Icon Font

Icone: 121 // Licenza: Licenza custom (possibile utilizzo in progetti commerciali)

3. Font Awesome

Icone: 196 // Licenza: Creative Commons Attribution 3.0 Unported

4. Iconic Icon Set

Icone: 172 // Licenza: SIL Open Font License and Creative Commons Attribution-ShareAlike 3.0

5. Raphaël Icon-Set

Icone: 116 // Licenza: MIT (open source)

6. PulsarJS @font-face

Icone: // Licenza: SIL Open Font License

7. IcoMoon

Icone: 316 // Licenza: Attribution-ShareAlike 3.0 Unported

8. Typicons

Icone: 88 // Licenza: Creative Commons Attribution 3.0 Unported

9. Entypo

Icone: 100+ // Licenza: Creative Commons Attribution 3.0 Unported

10. Heydings Icons

Icone: 60 // Licenza: Attribution-NoDerivs 3.0 Unported

11. Heydings Controls

Icone: 50 // Licenza: Attribution-NoDerivs 3.0 Unported

12. JustVector Social Icons Font

Icone:  62// Licenza: Free Art License

13. Modern Pictograms

Icone: 86 // Licenza: SIL Open Font License

14. Brandico

Icone: 18 // Licenza: SIL Open Font License and Attribution-ShareAlike 3.0 Unported

15. Signify Lite

Icone: 38 // Licenza: Licenza custom (possibile utilizzo in progetti commerciali)

16. Web Symbol Typeface

Icone: 78 // Licenza: SIL Open Font License

17. Social Media Icons

Icone: 74 // Licenza: Licenza custom (possibile uso in progetti commerciali)

18. Ikoo

Icone: 65 // Licenza: Attribution-ShareAlike 3.0 Unported