» » Small Font Icon Application

 

Small Font Icon Application

Author: bamboo06 on 4-12-2016, 01:32, views: 7567

7
We know that loading small icons on the page there are many ways, such as we use more is css sprite background image positioning, is to integrate a lot of small icons to a large map, and then use CSS to locate the background. There is also a more modern way is to use font font icon, which uses the @ font-face principle to load the icon font library, and then call the icon.

Use css sprite is very convenient way, you can have a lot of colorful icons, and compatibility is good, but the drawback is that the icon can not be scaled, or the zoom will be distorted, another maintenance is not convenient, modify an icon on the whole picture to modify , And the positioning of pixels need to use tools such as PS to determine the location. The use of icon font library more and more favored by developers, its maintenance is simple, but also on the icon zoom free, at any time can display high-definition icons, you can add shadow effects and animation effects, setting is also very convenient, the only difference is the icon Color comparison single, is set of when only set a icon for a single color. Here we look at how to use font font small icon.

HTML
There are many fonts on the market icon library, there are free to use the charges. Common are icomoon, Font-Awesome and Glyphicon Halflings, Glyphicon bootstrap in the use of free.
This article explains the use of icomoon font library, we can choose the official website icon like the font and then download and deploy to the project, of course, can also create their own icon and then uploaded to the official website. Download a good font library, in a fonts / folder. We first layout the html structure:
<ul class="icons">
	<li class="sp"><i class="icon-spades spades"></i> K</li>
	<li class="red"><i class="icon-file-picture"></i> Photo</li>
	<li><i class="icon-tablet"></i> iPad</li>
	<li><a href="#"><i class="icon-bubbles"></i> Review</a></li>
</ul>

We in the above html code, to add the element li [i], and then add the class attribute, class value corresponds to the css file font icon style.

CSS
First of all, we use @ font-face named font name, and load the font file, you need to load multiple font files to be compatible with each browser and system. And then define the class with the icon style, pay attention to the use of anti-aliasing, that is, when the picture will not enlarge the edge of the jagged phenomenon, and then use pseudo-class, set the content that is icon content.
@font-face { 
    font-family: 'icomoon'; 
    src:    url('../fonts/icomoon.eot?42vx6u'); /* IE9  */ 
    src:    url('../fonts/icomoon.eot?42vx6u#iefix') format('embedded-opentype'), 
        url('../fonts/icomoon.ttf?42vx6u') format('truetype'), 
        url('../fonts/icomoon.woff?42vx6u') format('woff'), 
        url('../fonts/icomoon.svg?42vx6u#icomoon') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
 
[class^="icon-"], [class*=" icon-"] { 
    font-family: 'icomoon' !important; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
 
    /* Anti-aliasing treatment =========== */ 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
 
.icon-spades:before { 
    content: "\e900"; 
} 
.icon-file-picture:before { 
    content: "\e901"; 
} 
.icon-tablet:before { 
    content: "\e902"; 
} 
.icon-bubbles:before { 
    content: "\e903"; 
} 

Then, we run the next html page, is not you can see a few icons, and convenient and practical bar.
If you want to define an animation effect for the icon, you can use css to achieve.
.spinner{ 
    -webkit-animation: spinner 1s infinite linear; 
    animation: spinner 1s infinite linear; 
} 
 
@-webkit-keyframes spinner{ 
    0%{ 
        -webkit-transform: rotate(0deg); 
        transform: rotate(0deg); 
    } 
    100%{ 
        -webkit-transform: rotate(359deg); 
        transform: rotate(359deg); 
    } 
} 

The above code defines the icon rotation animation, we can combine js to achieve this effect: when the mouse on the icon to display the icon rotation animation, when the mouse to leave, stop rotating animation. The effect of the code we can refer to the demo source. Demo I also added the Font Awesome font icon examples and Glyphicons font icon example, we can view the demo or download the source code to understand.

Category: Javascript / CSS / Plugins

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
30 June 2017 19:25

Troy

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
На нашем сайте вы можете найти все про Newsbeautiful

<
  • 0 Comments
  • 0 Articles
9 July 2017 14:45

cshang

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
ccording to many of these labels, they aren’t. Though you can still find repliche rolex a three-pack of knee-high DKNY socks on Costco.com for $9.99, a spokesperson for cheap polo ralph lauren the brand says it stopped selling goods there “years ago.” Similarly, a source familiar with Ralph Lauren’s sales replica handbags plans said the company “does not have a direct selling relationship” with Costco, although its polo shirts and fragrances often show up on oakley replica the store’s shelves. What, exactly, is going on? While Costco did not respond to multiple requests for comment, Marshall Cohen, chief industry replica yeezy shoes analyst at The NPD Group, was able to shed some light.

<
  • 0 Comments
  • 0 Articles
20 December 2017 04:51

charlie marks

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Thanks for your nice support and amazing reply at your side, i would definitely adopt this font strategy however i am unable to understand basics of coding. Now i am willing to work on researchpaperland as it is my part time job but i am confidant that it would one day become my full scope business.

<
  • 0 Comments
  • 0 Articles
6 January 2018 09:05

AprilHic

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
casino games slots
free casino games
<a href="http://casinobablogames.com/">free casino slot games</a>
slots for free

<
  • 0 Comments
  • 0 Articles
10 January 2018 12:13

Brianculse

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
autocad cd key
<a href="http://autocadtymafq.com/#">autocad</a>
autocad mechanical 2015 download
autocad viewer
descargar autocad 2017 ingles
<a href="http://autocadbnaqk.com/#">autodesk</a>
cheapest way to get autocad
auto cad
autodesk autocad lt 2017 product key

<
  • 0 Comments
  • 0 Articles
31 January 2018 23:29

SteveJex

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
viagra 100mg erfahrungen
<a href="http://viagrahlsacft.com/#">viagra without a doctor prescription</a>
how can you get viagra from your doctor
viagra without a prescription
viagra original ou generica
<a href="http://viagravbndcvef.com/#">buy generic viagra</a>
there any generic viagra
generic viagra 100mg
cialis viagra taken together

Information
Comment on the news site is possible only within (days) days from the date of publication.