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" />
Icon Fonts als Alternative zu herkömmlichen Icons Themen dieses Artikels im Überblick Zur Zeit floriert das Geschäft mit mobilen Geräten wie Smartphones und Tablets. Die Vielfalt der Bildschirmgrößen und Auflösungen nimmt damit immer weiter zu und flexible Web-Kreationen liegen stark im Trend. Ich möchte heute eine Möglichkeit zeigen, wie sich Symbole und Icons mit Hilfe von Icon Fonts ganz einfach in Webseiten einbinden und formatieren lassen. Was sind Icon Fonts? Anstelle von Schriftzeichen bilden Icon Fonts Piktogramme ab. Vorteile bei der Verwendung von Icon Fonts: Skalierung in Abhängigkeit zur AuflösungEinfache Anpassung und Änderung der Icon-FormatierungLeichte Positionierung der IconsOptimal für responsive Webdesign Die Aufzählzeichen der obigen Liste werden auch mit Hilfe einer Icon Font dargestellt. ;) Allgemein zur Verwendung von Schriftarten im Web Mittels CSS können beliebige Schriftarten (auch Icon Fonts) für ein Webseitenelement festgelegt werden. Variante 1) schränkt den Gebrauch individueller Schriftarten stark ein.
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 :
10 kostenlose Tools fürs Schriftdesign Schriftarten sind ein sehr kraftvoller, individueller Weg, um Inhalte darzustellen. Sie haben direkten Einfluss darauf, wie wir Inhalte wahrnehmen und interpretieren. Typografie ist heutzutage sehr beliebt, auch und gerade im Zusammenspiel mit responsivem Webdesign, für das ganz eigene Regeln gelten. Es gibt eine Unzahl von freien Fonts online, denken wir nur an das mittlerweile sehr groß gewordene Google Fonts Verzeichnis mit seinen (zur Zeit) 671 Schriftarten. 1. FontArk ist ein browserbasierter Font-Editor und ein Werkzeug zum Erschaffen neuer Schriftarten. Praktisch ist der Outline-Generator, der Ihnen erlaubt, einen Rahmen um den Buchstaben zu legen. FontArk – Advanced online font editor | FontArk Video Tutorials Video: Erste Schritte mit FontArk 2. PaintFont ist ein relativ simples, aber doch sehr wirksames Tool. PaintFont Homepage | PaintFont Tutorial Das noch auszufüllende Template sieht so aus: 3. BirdFont Homepage | BirdFont Download | BirdFont Tutorials | BirdFont Videos 4. 5.
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.
Get Started with Font Awesome Setting up Font Awesome can be as simple as adding two lines of code to your website, or you can be a pro and customize the LESS yourself! Font Awesome even plays nicely with Bootstrap 3! Thanks to the generous folks at MaxCDN, you can use Bootstrap CDN to add Font Awesome into your website with a single line of code. Paste the following code into the <head> section of your site's HTML. Use this method to get the default Font Awesome CSS. Copy the entire font-awesome directory into your project. Use the Official Font Awesome LESS Ruby Gem to easily get Font Awesome LESS into a Rails project. Add this line to your application's Gemfile: And then execute: Or install it yourself as: $ gem install font-awesome-less If you use Rails, add this to your e.g. application.less: @import "font-awesome-sprockets"; @import "font-awesome"; Use the Official Font Awesome SASS Ruby Gem to easily get Font Awesome SASS into a Rails or Compass project. Copy the font-awesome/ directory into your project.
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
Skalierbare Icon Fonts nutzen - CSS Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Skalierbare Icon Fonts nutzen" mit Ihrem Wissen! Eine Grafik in eine Webseite einzubauen ist kein großes Kunstwerk. Auch in Kombination mit Text bestehen wenig Komplikationen, vor allem wenn das Design sehr statisch ist und so gut wie immer gleich aussieht. Grafiken hingegen benötigen etwas mehr Aufmerksamkeit. Icon Fonts als Lösung Also muss eine andere Lösung her und diese nennt sich „Icon Fonts“. Icon Fonts sind Schriftarten, die Symbole (engl.: „icon“) statt Buchstaben beinhalten. Erste Schritte Mittlerweile gibt es etliche Designer, die Icon Fonts entworfen haben und stellenweise kostenfrei zur Verfügung stellen – lediglich eine Nennung wird in der Regel verlangt. Wer es schnell und bequem haben möchte, dem sei Font Awesome ans Herz gelegt, da es den Start sehr bequem gestaltet. Allerdings zeigt sich Firefox mitunter nicht kooperativ. Alles eine Sache der Definition css Fazit
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.
Wie du mühelos Icon-Fonts einsetzt – Eine Anleitung - Webdesign Journal Icons spielen im Screendesign und in User Interfaces eine besondere Rolle. Denn Icons können schnell und intuitiv eine besondere Bedeutung vermitteln. Entsprechende Icon-Fonts erleichtern hier den Einsatz von Icons in Webdesigns. Im Alltag begegnen uns Icons zum Beispiel auf Straßenschildern, Fernbedienungen, Fahrschein-Automaten. Icons spielen auch im Webdesign eine besondere Rolle: Eine kleine Lupe im Suchfeld, das Warenkorbsymbol, der Brief als E-Mail-Adresse, das Haus als Link zur Startseite, die Liste könnte man beliebig fortführen. Icons als Bilder „Früher“ wurden Icons als Bild in eine Webseite eingebunden. Icons als Schrift Icon-Fonts sind vielfältig nutzbar. Fast parallel zu den sogenannten Webfonts sind allerdings in den letzetn jahren einige die Icon-Fonts enstanden. Diese Schriftarten müssen zusätzlich geladen werden und dann per CSS an entsprechender Stelle eingebunden/angezeigt werden. Icon Fonts bei mawendo.de als Teaser Vorteile der Icon-Fonts Nachteile der Icon-Fonts 1. 2. 3.
Comment travailler avec des icônes en SVG Un bel article de notre frenchie Florens Verschelde qui a fait le buzz et a été repris par l'excellent CSS-Tricks. Explications claires du process et réflexions pour aller plus loin. Par Florens Verschelde Il existe bien des façons d’utiliser les icônes SVG en HTML et en CSS, et je ne les ai pas toutes essayées. Des sites web de communication et de contenu, souvent basés sur de gros CMS, plutôt que des applications full-JavaScript. Table des matières Préparer vos icônes Lorsque vous recevez une icône SVG, conçue par un designer ou livrée avec un outil graphique (Illustrator, Adobe Assets, Sketch, Inkscape, etc.), il peut être tentant de l’inclure directement dans votre projet. Travailler avec un nouveau document ou artboard Créez un nouveau document ou un nouvel artboard (plan de travail) dans votre outil favori et copiez-collez votre icône au centre. La coupe au carré c’est plus facile Bien dégagé autour des oreilles Laissez un peu de marge autour de la forme, surtout si elle est arrondie.
Prepd Pack - The Lunchbox Reimagined by Prepd That's why we created the Prepd Pack, a revolutionary new take on the humble lunchbox. From planning and preparing, through to tracking the nutritional value of your lunches, together with our app, Prepd Pack makes the whole process easier and more enjoyable. Prepd Pack consists of a beautifully designed case, a premium modular system of containers and smart magnetic cutlery. At the core of this new system are the removable modular containers, which can be combined in multiple configurations within the Prepd Pack to suit your individual daily needs. The containers are food safe, completely leak proof and made from the highest quality materials. Our app makes it simple to plan and prepare your lunches for the week ahead. All the recipes are designed to fill the modular containers perfectly, making meal prep easier, more efficient and eliminating food waste in the process. The Prepd app will be available for both Android and iOS smartphones and tablets and free to all backers.