background preloader

We Love Icon Fonts

We Love Icon Fonts
Related:  ICONES

200 Foodie Pack: A Free Set Of Food Icons Advertisement Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Today we are pleased to feature a set of 200 useful and beautiful foodie icons. The 200 Foodie Pack includes 200 customized icons available in PNGs (32×32px, 64×64px, 128×128px), as well as in AI, EPS and vector format. 2Large preview3 Download The Freebie! You may freely use it for both your private and commercial projects without any restrictions, including software, online services, templates and themes. Download the foodie pack (zip, 3.94 Mb)4 Behind The Design Link Here are some insights from the design team: “At Freepik we love to make freebies and to develop free icons sets for designers that make work easier. Many thanks to the creative minds behind Freepik71! Further Reading on SmashingMag: Link (ea)

Accélérez vos polices d'icônes ! L'utilisation de polices personnalisées (webfont) se développe de plus en plus sur les sites web. notamment les sites développés en responsive design. Elles se composent d'un ou plusieurs fichiers externes (EOT, SVG, TTF, WOFF) chargés via la déclaration font-face. L'utilisation de ces polices a même été "détournée" pour afficher des icônes, la plus connue étant Font-Awesome, popularisée par BootStrap. Voici donc un petit guide pratique pour optimiser le chargement d'une police d'icônes. Icomoon à la rescousse Icomoon est un des outils les plus simple pour personnaliser et générer une police d'icônes. Aller un peu plus loin Oui mais voila, il reste encore trop de fichiers à charger. /xmedia/doc/full/embed_init_(1).png" width="540" /> On se retrouve avec un fichier CSS contenant les définitions suivantes, où les versions TTF et WOFF de la police sont directement dans le fichier CSS, la version EOT restant externe. Et les anciens IE dans tout ça ? /xmedia/doc/full/embed_(1).png" width="540" />

Les 40 packs d'icônes gratuits incontournables de 2016 - Blog Tuto.com On continue notre bilan de l’année 2016, cette fois en s’intéressant aux packs d’icônes qu’elle a produits ! J’ai rassemblé dans cet article les 40 packs d’icônes gratuits incontournables de l’année. Vous y trouverez des icônes aux styles et aux thématiques variées : espace, nourriture, sport, jeux olympiques, musiques, Noël, Pokémon, économie, gestuelle, business, mode, science, été … Il ne reste qu’à scroller pour découvrir et télécharger les meilleures icônes de l’année 2016 ! 1. 2. 3. 4. 100 Airline Icons 5. 6. 7. 170 Retro Business Icons 8. 100 Colored Food & Drink Icons (EPS, SVG, PDF, PNG) 9. 100 Winter Icons 10. 11. 32×3 Christmas Icons 12. 13. 71 animal icons 14. 16 gesture Icons 15. 80’s Gadgets – 40 free icons 16. 52 Flat Activities Icons 17. 18. 19. 20. 21. 25 Design & Shapes Icons 22. 104×3 Marketing Swifticons 23. 24. 30 Hair Salon Icons 25. 26. 35 Free Checkout & delivery icons 27. 28. 29. 30. 31. 32. 33. 34. 15 Apple Devices Icons 35. 97 Free business Icons 36. 37. 38. 39. 40.

Glyphish – Great icons for great iPhone & iPad apps Créer une police d’icônes facilement à partir d’illustrations vectorielles Les polices d'icônes ou "font-icon" popularisées depuis Bootstrap sont de plus en plus utilisées sur le web. Certains services proposent de piocher des icônes dans différents packs pour se créer sa propre "police". Dans ce petit tutoriel nous verrons comment, grâce au service en ligne IcoMoon, il est facile de se créer sa propre police d'icônes à partir d'illustrations et fichiers vectoriels. Une fonte-icône est tout simplement une police d’écriture dont on aura remplacé certains caractères par des glyphes représentant les icônes que l’on veut utiliser. Outre leur flexibilité elles permettent un gain de performance puisqu’il suffit de charger une police (un fichier) pour avoir accès à un nombre important de caractères. Voir une petite démonstration en ligne : Icon Font are Awesome. Le placement de l’icône se fait généralement grâce à une balise <i> ou <span> (inoffensive par défaut) qui va utiliser en classe le nom de l’icône que le souhaite afficher. ou... IcoMoon propose 3 outils :

11 packs d'icônes gratuits & une façon de se faire connaître Dans cet article, vous découvrirez à la fois une collection d’icônes gratuites à télécharger sur plusieurs thématiques et une bonne façon de se démarquer en faisant du personal branding ! Les 11 packs d’icônes qui suivent ont tous été créés par une seule et même graphiste thaïlandaise : « AomAm » (Behance). Des icônes de fruits, camping, bières, cafés, sports, cosmétiques, sur le domaine de la médecine, autour de l’été, … tous disponibles sous Illustrator et Sketch et téléchargeables gratuitement. 1. Summer Icons – Icônes gratuites été 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.

Open Iconic, a free and open icon set Displaying Open Iconic's SVGs are a snap. Just treat them like your typical image and away you go! Pro tip: Don't forget the alt attribute. SVG Sprite Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. Tip: To make your icons easily style able, we suggest adding a general class to the <svg> tag and a unique class name for each different icon in the <use> tag. <head> ... Sizing icons only needs basic CSS. Coloring icons is even easier. Font Icon fonts are a great fallback for SVG—and our font is pretty great. Head Body Bootstrap Font Use Bootstrap? Foundation Font Iconic also works for Foundation and functions just like Foundation's icon font.

ICO (format de fichier) Un article de Wikipédia, l'encyclopédie libre. Pour les articles homonymes, voir ICO. Les fichiers de type ICO contiennent généralement plusieurs images de tailles différentes pour un affichage optimal en fonction de la taille et du nombre de couleurs supporté par le système utilisé.Les fichiers de type ICO prennent en charge les canaux alpha assurant la transparence de certaines couleurs.Les fichiers de type ICO ont une définition maximale de 256 × 256 pixels (les images au-delà du format 48 × 48 pixels ne sont visibles qu'à partir de Microsoft Windows Vista). Néanmoins, ce format de fichier peut également se retrouver utilisé sur les sites web en tant que favicon. Microsoft Windows Vista assure le support et offre l'affichage d'icônes allant jusqu'à 256×256 pixels, soit la résolution maximale d'une icône.

Icônes Pour vous permettre d’illustrer vos sites web, nous avons listé les meilleurs sites proposant des pack d’icônes à télécharger gratuitement ou des outils pour créer ses propres icônes. Les professionnels du digital ont régulièrement besoin de ces petites vignettes pour agrémenter les contenus. Ils permettent aux visiteurs de mieux s’y retrouver, de comprendre du premier coup d’œil une fonctionnalité. Pour vous permettre d’illustrer vos sites web, nous avons listé les meilleurs sites proposant des pack d’icônes à télécharger gratuitement ou des outils pour créer ses propres icônes.

Icône (informatique) Un article de Wikipédia, l'encyclopédie libre. Pour les articles homonymes, voir Icône. Une[1] icône est un petit pictogramme représentant une action, un objet, un logiciel, un type de fichier, etc. Une icône est une image comme n'importe quelle autre. Un favicon est une utilisation d'une icône pour représenter un site web, un CD ou un DVD. Les icônes peuvent être soit des images au format classique (PNG, JPEG...) soit des fichiers binaires au format propriétaire. Il existe des logiciels permettant de créer et d'éditer des icônes. Les logiciels d'édition d'icônes contiennent souvent un éditeur d'image rudimentaire permettant de dessiner pixel par pixel en utilisant des outils et filtres simples. Une fonction importante de ces logiciels est la génération d'icônes à partir d'images. Il existe aussi des sites web permettant de faire des opérations simples sur les icônes. Portail de l’informatique

Ionicons: The premium icon font for Ionic Framework Inline SVG vs Icon Fonts [CAGEMATCH] If you're building an icon system for a site, you have some options. If you know the icons need to be raster images, then you'll likely be using CSS sprites. If the icons will be vector images (much more common these days), you have some options. Let's compare. Icons are Vector There are big advantages to vector icons: resizable up and down without losing quality, extra sharp on retina displays, and small file size among them. In a recent personal example, while converting some icons from fonts to SVG on CodePen, some of the font icons were noticeably less sharp than the ones I converted over. CSS Control The big win for inline SVG here is probably multi-color icons. Positioning Weird Failures Forced Failures Semantics Accessibility Ease of Use Browser Support Winner It all comes down to browser support.

Related: