Learn css sprite and svg sprite_html/css_WEB-ITnose through font-awesome cases

Question: How are the small icons in font-awesome generated?

1. Open the browser debugging tool and find the small icon font-awesome user. Its css style is.

icon-user:before {  content: "\f007";}[class^="icon-"]:before, [class*=" icon-"]:before {  text-decoration: inherit;  display: inline-block;  speak: none;}

2. According to css File path, we open font-awesome.css and find that it references the css3 @font-face attribute.

@font-face {  font-family: 'FontAwesome';  src: url('../font/fontawesome-webfont.eot?v=3.2.1');  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');  font-weight: normal;  font-style: normal;}

3. We follow src: url() to find its icon svg

The path is url('../font/fontawesome -webfont.svg#fontawesomeregular?v=3.2.1') ​​format('svg');
We use sublime to open the svg image under the path. Since SVG is in XML format, it can support the usual XML tools and libraries. conversion and generation. Specific tutorial link: XML Question: Programming using SVG

<glyph unicode="&#xf007;" horiz-adv-x="1408" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z" />

4. Found that content: 'f007' corresponds to the unicode="oo7" above.

After writing this, you may have a clear idea of ​​how the icons in font-awesome come from, but you are still a little confused. There must be many questions to ask:

What is an svg image? How is it generated?
What’s the point of making all icons into one svg image?
What is the difference between it and css sprite?

Haha, I am actually the same as everyone else. I am very curious, so I checked a lot of documents. It turns out that some masters have already studied it. I will put the links one by one. Here I will talk about some of my knowledge first

css-sprite

1. First, what is css sprite?
css sprite, also called css sprite or css sprite, is a background image splicing technology. Using css sprite images can reduce the number of page requests. This is very important because every http request is a long connection. We all know that http overhead is very large. Like some shopping websites, if so many icons are introduced by tags , the consequences would be disastrous. The design of css-sprite is to improve page access speed and website request resource overhead.
2. Principle of css-sprite implementation
css-sprite is implemented through the new CSS3 attribute background-position. We can introduce image files at one time and cut them by setting background-size Small icon, and then use css-position to position the specific small icon icon
3. How to make css-sprite

1. There is a video of Teacher Yuanren on the MOOC online to teach you how Make a css-sprite. Portal: CSS Sprite sprite application

2. Windows developers can directly Baidu css-sprite production tool, there are many tools.
3. Students who compile with sass can directly use compass to automatically merge css sprite images, tutorial link address
4. You can use PS and AI to manually puzzle

4.css -Sprite Disadvantages : The cost of puzzle and post-maintenance is relatively high.
We can pass

svg sprite

Because I don’t know much here, and I also learned from the technical blog of Master Zhang Xinxu, so I directly post the address:

Must be hot in the future: Introduction to SVG Sprite technology

<br /><br /><svg>  <defs>    <g id="shape">        <rect x="0" y="0" width="50" height="50" />        <circle cx="0" cy="0" r="50" />    </g>  </defs>  <use xlink:href="#shape" x="50" y="50" />  <use xlink:href="#shape" x="200" y="50" /></svg>

Summary:
symbol use => SVG Sprite. And at the HTML level, the code cost for icons is almost the same as traditional CSS Sprite or the popular font-face. The code is simple and easy to maintain. All SVG icons are on one SVG source. Retina is good, the size can be stretched arbitrarily, and the color is controllable. It is really the future star of web icons.