Making icon icons in Web pages

Use fonts to draw icon icons in Web pages

First step: Get font resources
Iconmoon website
Https://icomoon.io

There are many free small icons available in Iconmoon, and you can set the usage properties of the download icon (set by the button preferences established in the website).
It has "use I" using the <i> tag to draw the icon; "Use Attribute selectors" uses the property selector; "Use a Class" uses the Class property.

When you use the <i> tag, the font values such as font-family are assigned to all <i> tags.
When using the property selector, font values such as font-family are assigned to [class^= "icon-"],[class*= "icon-"]
Using the Class property, the font values such as font-family are assigned to. icon

Either way, use @font-face to introduce fonts first.

Step two: Choose how to make

Way 1:css Sprite

Also called the CSS Wizard, is a technology that uses background image positioning to draw icon icons in Web pages.

It is to integrate some of the occasional background images into a picture file, and then use the CSS background image to locate the location to display, so also called "picture flattening" technology.

1. Benefits: reduce file size and server count, thereby improving efficiency.

2, the disadvantage: you need to determine the size of each icon and the spacing between the icons, and the style of the icon can no longer change

3, Picture: need to save the picture as a PNG-24 file format.

4. Principle:

In fact, all the small pictures in a picture, and then in each <li> tag to import this image as a background map, and then use background-position to locate the image (note that in each HTML element, Background images are displayed from the upper left corner, where they cannot be displayed automatically, and are positioned to the location of the icons that need to be displayed, and are hidden beyond the width of the <li> label. You need to set the properties of Background-image and Background-position.

5. General wording:

1 Background-image:url (images/bgimage.gif); 2 background-position:0 -80px;

(0 is the left value, -80px is the top value, that is, the image is hidden 80px.) These two values can be set by themselves according to the location of the small icon to display, can take a negative value)

Way 2:font font + HTML
Use the font library to draw small icons in text form in a Web page, using CSS to control its style

1. Advantages:
(1) Flexibility: Easily change other CSS effects or use color values to change the colors of icons
(2) Expandable: Easy to change icon size with font-size
(3) icons are vector, scaling icons do not affect sharpness
(4) Compatibility: Font icons support all general wording: modern browsers (including Bad IE6)
(5) Local use: By adding a font to the local system, you can reuse them in different design and editing applications

2. General wording:

1 @font-face{2 font-family:"Imooc-icon";3 src:URL (".. /fonts/icomoon.eot ");/*IE9 compatibility Mode*/4 5 /*. EoT? #iefix是兼容IE6-ie8*/6 src:URL (".. /fonts/icomoon.eot #iefix ") format (" Embedded-opentype ")7 , URL (".. /fonts/icomoon.woff ") format (" Woff ")8 , URL (".. /fonts/icomoon.ttf ") Format (" TrueType ")9 , URL (".. /fonts/icomoon.svg ") format (" SVG ");Ten Font-weight:Normal; One Font-style:Normal; A} -  - /*for anti-aliasing of icons, smooth display, written in public class of all icon elements*/ the -webkit-font-smoothing:antialiased; - -moz-osx-font-smoothing:grayscale;

1 <!--the wording in HTML -2 <Li><ahref=""><Istyle= "color: #efe0ce;"class= "Imooc-icon">& #xf048;</I></a></Li>

3, the wording description:
<li> such as & #xf048 in the tag, which is a 16 binary value, which is the default code when each icon is displayed in small icons. The first thing you get is f048, a value that needs to be added & #x to be recognized by the browser.
Note that some font libraries are not used in this way, and some use the class attribute to determine which icon to display, rather than using a 16 binary value.

Way 3:font font + CSS

1, introduce the font with @font-face, the same way 2

2. Use CSS content:

Before pseudo-element or after pseudo-element
The content property of a pseudo-element

* Pseudo element: Create a false element and insert it before the content of the target element
Syntax: Fixed element: Pseudo-element {}
Fixed class: Pseudo element {}

3 . The contents of the insert are set by the content property.

1 /* here's the. Icon-music class name is optional, just copy and paste the name into the HTML code. */ 2 . Icon-music:before {3*/* the 16 binary values here represent the contents of the small icon.  4 in front of the 16 binary value, plus backslash "\" to escape */5content: "\e605" ; 6 }

Summary: Three ways to compare

CSS Sprite compatible with all major browser low versions

Font+html compatible with all major browser low versions

FONT+CSS not supported for low-version browsers

Resources

Mu class net http://www.imooc.com/learn/243

Special thanks to the supreme Jade teacher nets!

Making icon icons in Web pages