Several methods of processing icons in web

Method One:

Make small icons with background

Like this, after getting the design draft, put all the icons on a picture, using background-position, width, height to control the position and size of the icon.

Code:

. Icon{Display:Inline-block;background:URL (.. /images/icon.png);}. Icon1{background-position:0 0;width:16px;Height:16px;background-repeat:no-repeat;position:Absolute;Top:6px; Right:6px;}. Icon2{background-position:-20px 0;width:41px;Height:18px;margin:10px;}. Icon3{background-position:-29px-41px;width:17px;Height:9px;Margin-left:10px;}. Icon4{background-position:0-21px;width:62px;Height:14px;}. Icon5{background-position:-65px 0;width:49px;Height:49px;Margin-top:5px;}

When referencing:

<Iclass= "icon Icon1"></I><Iclass= "icon Icon2"></I><Iclass= "icon Icon3"></I><Iclass= "icon Icon4"></I><Iclass= "icon Icon5"></I>

Advantages:

Image as background to display icons, the effect of the icon is good, not easy to appear jagged

Disadvantages:

Icon size and color is difficult to control, especially when the response type, most suitable for the development of PC-side web site, mobile side is not recommended for

Method Two:

Simple icons can be drawn in CSS, such as:

<class= "box"><class= "ico"  ></s></i>

. Box{Display:Block;width:200px;Height:20px;background:Gold;Overflow:Hidden;position:relative;Top:100px; Left:200px;/*control the location of the small triangle*/}. ico{width:100px;Height:100px;Display:Block;-webkit-transform:Rotate ( -45deg);-moz-transform:Rotate ( -45deg);-o-transform:Rotate ( -45deg);-ms-transform:Rotate ( -45deg);Transform:Rotate ( -45deg);Border:5px Solid #000;position:Absolute;Top:30px; Left:20px;;}

* Pseudo-elements can also be used: Before/:after assisted drawing

Advantages:

Saves space and loads faster than the previous method

Disadvantages:

The size is not good control, the icon is limited to simple, can not complete complex icon drawing

Method Three:

Commonly used font icons, such as the Ali icon, font awesome, etc., take the Ali icon as an example:

Add the icon you want to the library, click on the Shopping Cart shape icon in the top right corner and pop up as the effect:

Add to the item you need, and then go to Icon Manager-"My project to download the icon just added to the local:

After unpacking the download, create a new Fonts folder in your project and put the following files in:

In your style file, refer to the Change font icon:

@import url ("Iconfont.css");

Insert the HTML where you want to call this icon:

<class= "Iconfont">& #xe603; </ I >

Or so

< I   class = "Iconfont icon-zhuye-copy" ></ I >

Advantages:

Fast loading speed, font size and color for easy modification

Disadvantages:

The effect of the font size, the font icon display will have an obvious aliasing

Method Four:

Use SVG. SVG is an XML-based graphic format. This is a scalable vector graphic. SVG is a standard developed by the World of the world, and became the recommended standard in 2003. Compared to other image formats, SVG has the advantage that SVG can be read and modified by many tools, SVG is smaller in size, and SVG images can be printed in high quality at any resolution.

The use of SVG is mainly as follows:

1.IMG Label Direct Reference

This is a simple way to refer to the SVG format image as a normal picture. This approach does not apply much in the actual usage scenario.

2. Inline mode

IE9, Firefox, Opera, Chrome, and Safari all support inline svg. IE8 and the following versions of browsers can support SVG by installing plugins. Inline SVG is directly part of an HTML document and does not require a separate request. Inline SVG is inconvenient to use, and if you add large pieces of SVG code to the HTML, it is difficult to maintain and the code is not reusable.

3.Data URIs

In this way, the SVG file is converted directly to the Base64 encoding format and then referenced in data URIs. The sample code is as follows:

. Icon {  background: url (data:text/svg+xml;  BASE64,<BASE64 encoded data>)}

4. Using the elements in SVG <symbol>

<svgxmlns= "Http://www.w3.org/2000/svg"style= "Display:none;">    <symbolID= "Circle-cross"ViewBox= "0 0">     　　 <title>Circle-cross icon</title>     　　 <PathD= "M16 1.333q2.99 0 5.703 1.161t4.677 3.125 3.125 4.677 1.161 5.703-1.161 5.703-3.125 4.677-4.677 3.125-5.703 1.161-5.7 03-1.161-4.677-3.125-3.125-4.677-1.161-5.703 1.161-5.703 3.125-4.677 4.677-3.125 5.703-1.161zm0 2.667q-2.438 0-4.661.953t-3.828 2.557-2.557 3.828-.953 4.661.953 4.661 2.557 3.828 3.828 2.557 4.661.953 4.661-.953 3.828-2.557 2.557-3 .828.953-4.661-.953-4.661-2.557-3.828-3.828-2.557-4.661-.953zm3.771 6.885q.552 0. 948.391t.396.943-.396.948l-2.833 2.833 2.833 2.823q.396.396.396.938 0.552-. 396.943t-.948.391-.938-.385l-2.833-2.823-2.823 2.823q-.385.385-.948.385-.552 0-.943-. 385t-.391-.938q0-.563.385-.948l2.833-2.823-2.833-2.833q-.385-.385-.385-.938t.391-.948.943-.396.948.396l2.823 2.833 2.833-2.833q.396-.396.938-.396z "/>    </symbol>    <symbolID= "Circle-check"ViewBox= "0 0">       　　 <title>Circle-check icon</title>       　　 <PathD= "M16 1.333q2.99 0 5.703 1.161t4.677 3.125 3.125 4.677 1.161 5.703-1.161 5.703-3.125 4.677-4.677 3.125-5.703 1.161-5.7 03-1.161-4.677-3.125-3.125-4.677-1.161-5.703 1.161-5.703 3.125-4.677 4.677-3.125 5.703-1.161zm0 2.667q-2.438 0-4.661.953t-3.828 2.557-2.557 3.828-.953 4.661.953 4.661 2.557 3.828 3.828 2.557 4.661.953 4.661-.953 3.828-2.557 2.557-3 .828.953-4.661-.953-4.661-2.557-3.828-3.828-2.557-4.661-.953zm4.49 7.99q.552 0.943.391t.391.943-.396.948l-5.656 5.656q-.385.385-.938.385-.563 0-.948-.385l-2.833-2.823q-.385-.385-.385-.948 0-.552.391-. 943t.943-.391.948.396l1.885 1.885 4.708-4.719q.396-.396.948-.396z "/>    </symbol>    <!-- ....  -</svg>

There are two ways to refer to the Icon in this SVG using ID:

Insert the above SVG as the first element of the body into the HTML and then:

<class= "icon">  <xlink:href = "#circle-cross" ></  Use > </ svg >

Alternatively , SVG is saved as a file and referenced as an address:

<svgclass= "icon">  < UseXlink:href= "/img/posts/svg-icons.svg#circle-check"></ Use></svg><svgclass= "icon">  < UseXlink:href= "/img/posts/svg-icons.svg#circle-cross"></ Use></svg>

There's no big difference between using an IMG tag in this way. The advantage is that all the icons are in one file, so they are only requested once. This does not need to be as tedious as a Sprite to set the displacement of the picture. Using the ID name icon and using the ID reference directly is both intuitive and straightforward. Its flexibility is almost the same as Inline SVG-you can set color, edge style, size, and so on. Depending on the browser, sometimes you need to use the start as an SVG tag.

Several methods of processing icons in web