Shulou(Shulou.com)06/03 Report--

How to use Font font small icon, I believe that many inexperienced people do not know what to do, so this article summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

We know that there are many ways to load small icons on a page. For example, we often use css sprite background image positioning, which is to integrate many small icons into a large image, and then use CSS to locate the background. Another more modern way is to use font font icons, which load the icon font library using the @ font-face principle, and then call icons.

Css sprite way is very convenient, there can be a lot of colorful icons, and good compatibility, but the disadvantage is that the icon can not be zoomed, or zoom will be distorted, and maintenance is not convenient, modify an icon to the entire large image on the line to modify, and positioning pixels need to use PS and other tools to determine the location. And the use of icon font library is more and more favored by developers, its maintenance is simple, and the icon can be scaled freely, high-definition icons can be displayed at any time, shadow effects and animation effects can be added, and the setting is also very convenient. The only disadvantage is that the icon color is relatively single, that is, when you set it, you can only set one icon to a single color. Let's take a look at how to use font font small icons.

HTML

At present, there are many font icon libraries on the market, some for free and some for free. The common ones are icomoon,Font-Awesome and Glyphicon Halflings,Glyphicon, which are free to use under bootstrap. Of course, the domestic Ali system has also opened its own icon library.

In this article, using the icomoon font library, we can select the font icon we like on the official website and download it and deploy it to the project. Of course, we can also make our own icon and upload it to the official website. The downloaded font library is in a fonts/ folder. Let's first arrange the html structure:

Spades K photos iPad comments

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

CSS

First, we use @ font-face to name the font name, as well as the loaded font file, which needs to load multiple font files to be compatible with browsers and systems. Then define the style that class contains icon, note that it uses anti-aliasing, that is, the image will not appear edge aliasing when enlarged, and then use pseudo-class to set content that is the icon content.

Font-face {font-family: 'icomoon'; src: url ('.. / fonts/icomoon.eot?42vx6u') / * IE9 compatibility mode * / 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 {font-family: 'icomoon'! important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; / * Anti-aliasing = * /-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 html page, whether you can see a few icons, convenient and practical.

If you want to define animation effects for icons, you can use css to do so.

.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 over the icon to display the icon rotation animation, when the mouse away, stop the rotation animation. For the code of this effect, you can refer to the source code in demo. Demo I also added Font Awesome font icon examples and Glyphicons font icon examples, you can check demo or download source code to understand.

After reading the above, have you mastered how to use small icons in Font fonts? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.