Briefly explain what is the font icon:
Fonts icon is a kind of special fonts. In this font, displayed to the user like a picture, like a widely used Web development project, as shown below:
Why use the font icon and use the advantage of font icons:
This is because the picture does not scale very well , when the enlarged picture is distorted (ie, blurring) . And load each image needs a "http request", and therefore slow down the whole time the page is loaded. In addition, if there is no picture editor (software), then it is difficult to picture editing, processing and other operations .
Advantages font icon: font would not have these problems, the font can be scaled without distortion possible to control its size and color by CSS, and each character does not require additional "http request." When we used the font as text writing, often they did not think that they are just one shape only.
There are two ways to get the font icon
Ali vector icons official website: www.iconfont.cn (recommended)
foreign site: http: //icomoon.io
How to use the Fonts icon:
As foreign slow loading of the site, where I icon library with Ali provided to demonstrate
step 1: search iconfont in the browser, find Alibaba vector icon library official website, log in and register, as has been previously registered, skip this step;
step 2: the mouse moved to the icon library, there is a drop-down list, select the official icon library;
step 3: Click on an icon in the list of the first library to open a new page and add your favorite icons to the repository;
Add to Library:
step 4: upper right corner there is a similar shopping cart, you add to the repository of all the font icon inside;
step 5: click Add to project
Then the page will automatically jump to the corresponding item in the figure:
Download to local :( most critical step)
Unzip the downloaded file as follows:
step 6：如何在项目中使用字体图标呢,其实很简单,创建一个i标签或者span标签,添加一个类名 并把相对应的代码复杂粘贴到标签上。
打开这个 demo_index.html 只需要复制这串代码即可 如图：
然后把 iconfont.css 粘贴到 css 文件夹中 这是我的项目文件夹和对应的代码：
这是在运行案例 谷歌浏览器里看到的字体图标(觉得字体太小的话可以通过 font-size 属性来控制的)：
恭喜你完成了 没有效果的话再仔细看一遍啦