Use Cases for Icon Fonts. The following is a guest post by Tim Pietrusky. Tim knows this site has long been a proponent of using fonts for icons, and had his own interesting use cases to share. While creating the demos, to make things easier for himself, he created a free service for icon font hosting. It makes for a nice gift to the community as well. Ill let him tell you about it. Grocery Icon Vector WhiteIcon fonts are great You can CSS the crap out of them and they dont mind. They look good on any display or resolution. Grocery Icon Vectors' title='Grocery Icon Vectors' />There is only one HTTP request for any size set of icons. Alan Chalmers Que Es Esa Cosa Llamada Ciencia Pdf. Lets look at 5 typical uses cases for icon fonts. Before we start. We wont be using any vendor prefixes to keep the example code clean and readable. We will be using things like animations, transitions, and transforms, all of which require vendor prefixes to ensure the best browser support. Grocery-store-products-icons-set.jpg' alt='Grocery Icon Vector In The Know' title='Grocery Icon Vector In The Know' />How you want to deal with vendor prefixes is up to you. As you will see in the examples, I use the icon fonts hosting service weloveiconfonts. This is my own project. Heres the story I wanted to write an article about icon fonts and searched for a free icon fonts hosting service, but found none. So I created this service to be able to write this article. CSS Loader. There are quite a few awesome, pure CSS loaders out there and you can even create your own at cssload. Another way of doing this is with icon fonts. You can use a character that looks like a loading symbol and animate it with CSS. This is the basic HTML. The first three loaders are children of div. Cindy Just click Zehrs Flyer Icon commented on Sep 5 2012 414PM If your having trouble getting the flyer. Zehrs flyer underneath. An icon font for use with Google Maps API and Google Places API using SVG markers and icon labels. Map Icons makes Google Maps Markers dynamic with control over shape. The forth div. complex is a combination of two icons. Import the icon font Fontelico into your CSS import urlhttp weloveiconfonts. Add the animation named load to the elements, whichs spins them around from 0deg to 3. Normal left. Fast center. Grocery Icon Vector Pack' title='Grocery Icon Vector Pack' />Steps right. The last loader div. The first child is the devil element using the animation named rotate and the second child is the spin icon using the animation named scale. Devil icon. complex span nth child1. Spin icon. complex span nth child2. Demo on Code. Pen 2. Social. Count meets Style. People love using social sharing buttons on their sites to make it easier for visitors to spread the word. But when you combine Facebook, Twitter and Google you are facing an 3. KB empty cache load size. Thats where the Social. Count j. Query plugin comes in. Social. Count is progressively enhanced, lazy loaded, and mobile friendly. The default styling is simple and the iframe that contains the buttons is tiny. Lets enhance these buttons with some fancy CSS. This is the HTML that was created with the Social. Count markup generator. Just an unordered list with with links and icons. Google is a search engine. Share on Facebook. Share on Twitter. Share on Google Plus. Import the icon font Entypo into your CSS import urlhttp weloveiconfonts. Well override the default styling provided by Social. Count by Adding a transition. Scaling the iframe. Setting a custom background on the buttons. Editors note The CSS below is in SCSS format of Sass. A number of the following demos use this. If you want to see the regular CSS, you can visit the Code. Pen demo links provided and click the word SCSS in the header of the CSS editor to see the compiled CSS. Demo on Code. Pen 3. Enhanced lists. The following three examples are all based on this simle HTML. Titlelt h. 2. Textlt li. Textlt li. Textlt li. Import the icon font Font Awesome into your CSS import urlhttp weloveiconfonts. Gcc Serial Port Communication Program. Font. Awesome, sans serif. Add the default styling for list, list elements, pseudo elements, and the button. Instead of using a class to set the icon on the list elements, we change the content property of the element, creating a pseudo element. Font. Awesome, sans serif. Stuff You Love. The first examle is very easy. A heart instead of the default list style and a special hover The icon is moved to the right and the after pseudo element gets the text of the data attribute data text. Downloads. This is a custom list of downloads with extended markup A link and a button for every list element. The button is hidden by default and shown on hover. Your account. A UI concept for a user menu. When you hover over a list element, the icon is moved to the right and the box shadow fills the whole background. Download Undelete Free Windows 7 Activator Software Download'>Download Undelete Free Windows 7 Activator Software Download. Every list element has its own icon based on the nth child selector and the content property. Demo of all three list types on Code. Pen 4. Emocons. js j. Query Plugin. Emojons. Query plugin which searches the content of an element for specific character sequences. All matches are replaced with a span and the HTML class of the corresponding icon. For example, a chat app lt div classchat. D o B P. Then call the Emocons. All elements inside chat are now transformed into something like thislt span classfontelico emo grin go title D lt span Import the icon font Fontelico into your CSS import urlhttp weloveiconfonts. When Emocons. js transforms a string into an emoticon, it adds the class go which calls an animation to the span element. Some of the emoticons get a special style e. Demo on Code. Pen 5. Parallax Movie 1. The last example is just for fun. Its just an experiment to create an endless parallax movie with one icon font. The he HTML consists of many elements to create the scene The setting sky, ground, night and sun. Fixed element bicycle. Animated elements Trees, giraffe, shopping cart, buildings and heliportlt div classnight lt div. Import the icon font Maki into your CSS import urlhttp weloveiconfonts. The wrapper rotates the whole scene 3deg. When the sun goes down, the night rises. The sky and the ground both use the same background position animation, but at different speeds. Moving an element along a circle is an awesome article from Lea Verou which is used here to animate the burger sun. This is the only element which has no animation. But it should look like its moving. And here are the animated elements which use all the same rolling animation at different speed. Maki, sans serif. Y 1. 80deg. maki grocery store. Demo on Code. Pen Further reading. Thanks for your time And of course this isnt all you can do with icon fonts. Dont be afraid to experiment yourself. Map Icons. Map Icons extends the Google Maps Marker Object to enable either an image or SVG marker to be used with the icon placed on top as a label. Include. Include the fonts in the distfont directory as well as the distcssmap icons. To use the icons with Google Maps include distjsmap icons. Classes. Icon class names are to be used with the map icon class prefix. Styling the Icon. Styles to icons can be applied with the. CSS selector. map icon. Explicit styles to icons being used on a Google Map should be applied with. CSS selector. map icon label. FFFFFF. line height 4. Creating a Marker. Markers are created just like a normal Google Maps Marker, however, the class is extended for the mapiconlabel property to add in markup for marker labels. Note You should be creating an instance of Marker rather than google. Marker in order for the functionality added by mapiconlabel to work. Marker. position new google. Lat. Lng 2. 7. 4. SQUAREPIN. fill. Color 0. CCBB. Opacity 1. stroke. Color. stroke. Weight 0.