background preloader

Créer une police d’icônes facilement à partir d’illustrations vectorielles

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 : Related:  Centres d'intérêts divers

Blog, Freebies | Icojam - sweetest free & premium royalty-free stock icons Cosmo mini is a free version of Cosmo icons and includes 1566 icons in 40×40 sized pixel-perfect PNG + “testdrive” icons in PSD, AI, CSH, SVG, 60×60 sized PNG. All icons are monocolored and divided into following categories: Baby, Basic, Building, Culture, Devices, Documents, Education, Finance, Food 1-3, Holiday, Layout, Medicine, Mobile, Multimedia, Navigation, Player, Symbols, Transport, User, Weather, Work, Furniture, Appliance. License: These icons are free to use in any kind of commercial or non-commercial project unlimited times.Ammount of icons: 1566Sizes: 40×40File Types: .pngTestdrive file types: PSD, AI, CSH, SVG, 60×60 sized PNG. If you need vector and hi-res version of these icons you can buy them on Creative Market: Cosmo icons.

Cikonss | Pure CSS Responsive Icons [TUTORIAL] Créer votre police - forum Avant de commencer quoi que se soit, je tiens à dire que le tutorial suivant est extrait du magasine Computer Art n°73. Ce tutorial est principalement destiné aux débutants et a pour but de vous initier à la création typographique. Gardons en tête que ce n’est qu’une initiation, la réalisation d’une police reste un travail long et fastidieux. ---------------------------------------------------------------------------------------♦Créez votre propre police manuscrite ♦ A l’aide des logiciels ScanFont et TypeTool, apprenez à créer une police avec votre propre écriture manuscrite. La clé de la réussite de la création d’une police manuscrite se trouve dans la simplicité et l’originalité. ÉTAPE 1 RESTEZ SIMPLE Plus vous dessinez des lettres compliquées, plus il vous sera difficile de les scanner et de séparer chaque glyphe. 1 Pour commencer à travailler sur votre typo, dessinez des lignes sur une feuille de papier A4. ♦CONSEIL♦Contraste fondamental Utilisez toujours un feutre noir.

Centrer du texte dans un <hr /> Le problème Non, <hr /> ne peut pas contenir de texte. Je veux plutôt parler de l'effet obtenu si cela était possible, qu'on retrouve un peu partout sur le web. Ce problème n'étant pas nouveau, des implémentations ont déjà été trouvées, mais ces dernières sont rarement satisfaisantes. ne dépend pas du fond présent sous le texte ;ne suppose pas que la largeur prise par le texte est connue ;tient en un seul élément HTML. Et tout ceci est rendu possible par flexbox ! La solution… Partons du HTML suivant : <div class="hr">Chapitre 1</div> Il suffit de quelques lignes de CSS pour obtenir l'effet voulu : Les lignes de part et d'autre du texte sont créées par la bordure des pseudo-éléments. …ou presque Cette solution serait parfaite si elle ne posait pas un soucis de compatibilité lié à flexbox. Toutefois, nous pouvons faire en sorte que ces derniers n'affichent que le texte centré (sans les lignes).

Beautiful Type 17 Useful & Fresh Tools for Web Designers Don't Forget to participate in a contest where you can win an amazing e-Commerce template from TemplateMonster. Despite the fact that there is a huge plethora of web tools that are available for the web developers and designers to help them with their work, designers and developers always need some fresh tool that can expedite their work flow. A useful tool is just like a blessing for the designer and for the web developer as well. Having good tools and useful resources make web development easier and save time as well. Below, we have listed down some useful and fresh tools for the web developers and designers. Mailrox A web application to quickly build bulletproof HTML emails. BootMetro Simple and complete web UI framework to create web apps with Windows 8 Metro user interface. Spritebox Spritebox is a WYSIWYG tool to help web designers quickly and easily create CSS classes and IDs from a single sprite image. Tiny Fluid Grid The happy & awesome way to build fluid grid based websites. Jarallax

Unicode character table Про Юникод. Юникод (англ. Unicode) - это стандарт кодирования символов, представляющий знаки многих письменных языков. Кодирование – это сопоставление элементам текста (буквам, цифрам, знакам препинания) последовательности длиной в один или несколько символов другого алфавита. В азбуке Морзе буквы представлены в виде точек и тире, а в компьютерах нулями и единицами. Про символы Юникода. Все символы в Юникоде имеют свой номер и HTML-код. Что есть в Юникоде и чего нет. Юникод включает большинство современных письменностей: латинскую, кириллицу, греческую, грузинскую и т.д. Консорциум Юникода не придумывает новые буквы и знаки. Товарные знаки кодируются только в порядке исключения. Et si on lâchait la bride à nos enfants ? Fliqués, surprotégés, les enfants d’aujourd’hui ont à peine le droit d’aller acheter seuls une baguette de pain. Une culture du risque zéro qui les prive de liberté et les prépare mal aux aléas de la vie. C’est un étrange phénomène qui se répand dans certains squares. Les bancs, initialement prévus pour que les parents discutent en retrait, se vident. Les adultes restent collés au toboggan ou à l’échelle de corde. « Tu veux que je te tienne ? Dans beaucoup de villes, si vous croisez un enfant à vélo, soyez assuré que les parents pédalent juste à côté. Cela n’a rien à voir avec la façon dont leurs parents ont grandi. Cabanes et aventures dans les bois Quand elle intervient dans des conférences, celle qui a fondé, aux Etats-Unis, le mouvement Free Range Kids – pour des « enfants élevés en plein air » – demande aux adultes ce qu’ils avaient le droit de faire étant petits et qu’ils ne laisseraient pas faire à leurs enfants. Oui, mais le monde a changé, lui dit-on. Jouer pour évoluer

GitHub - richleland/pygments-css: css files created from pygment's built-in styles Home Ultimate Free Icon Set: 1000 Free Icons By Freepik.com This design resource freebie — containing 1,000 free vector icons — is the biggest free icon set that Six Revisions has ever released. This freebie comes in three formats: PNG – a popular web format that’s ready to use (read about the PNG image format here)EPS – an editable graphics vector file that you can open and edit in vector-editing software like Adobe Illustrator and CorelDRAWAI – the original vector file that you can open and edit in Adobe Illustrator This freebie was created exclusively for the Six Revisions readers to enjoy by Freepik.com — a search engine that helps graphic and web designers find high quality photos, vectors, illustrations, and PSD files for their creative projects. Preview Download ultimate_free_icon_set (ZIP, 10.7 MB) Related Content About the Author Freepik.com is a search engine that helps graphic and web designers locate high quality photos, vectors, illustrations and PSD files for their creative projects.

Related: