Patchwork complete a "front-end frame" (2) - Fonts icon

Foreword

Remember the previously developed under the project directory icon file will be stored a lot, difficult to maintain, and the alignment of icons and fonts is also a troublesome thing;

Following is a brief list of advantages and disadvantages of the font icon, an excerpt advantages and disadvantages of the use of icons and fonts

Advantage

Lightweight : an icon font is smaller than the series of images. Once fonts are loaded, the icon will be rendered immediately, no need to download an image. This reduces the number of HTTP requests, and with HTML5 and offline storage may be made to optimize performance.
Flexibility : you can not adjust the font page of text like the same to be set by the size of the font-size property, but also can add a variety of text effects, such as color, hover, filter, text- shadow, transform and other effects . Flexible simply outrageous!
Compatibility: Icon font support modern browsers, even the low version of the IE browser, so you can safely use it.
Compared to enlarge the bitmap images appear distorted, will reduce wasted pixels, icon font will not happen.

Disadvantaged

Icon font can only be rendered monochrome or CSS3 gradient color
Also has a corresponding restrictions on copyright, of course, there are many free icon fonts can be downloaded for us.
When their own creative icon font when it is time consuming, post-reconstruction personnel and maintenance costs are relatively high

Currently there are personal recommendation icon library font-Awesome , Bootstrap Glyphicons , Ionicons , themify-iconsThe ;

If you want to customize some of the font icon, then strongly recommended Alibaba Iconfont

Start

iconfont

Use iconfont's not go into details, please move Iconfont official help documentation , to continue our "front-end framework", in Iconfont project added a few icons:

Then copy the link to open in a browser:

Icon.css create a new file, paste the code into it;
to create a new page, the code:

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title>首页-欢迎</title>
    <link href="css/icon.css" rel="stylesheet" />
</head>

<body>
    <i class="icon ls-icon-shrink-right"></i>
    <i class="icon ls-icon-spread-left"></i>
    <i class="icon ls-icon-user"></i>
    <i class="icon ls-icon-password"></i>
</body>

</html>

Preview