哈尔滨网站建设价格低/seo全国最好的公司-拓冰网页制作

web端和移动端为什么需要做字体图标？

性能好是最主要的原因，可以减少http请求。在之前项目中，网页的图标是用的图片，当图标很多时，http请求多，而且图片体积比较大。

字体图标制作流程

1设计师设计出图标保存为SVG格式的。

当没有设计师时，也可以在http://www.iconfont.cn/ 或者其他网站下载自己需要的SVG图标。需要登陆账号，看见喜欢的图标可以收藏或者下载下来，一版情况下不支持这样，图标也是有版权问题的，不过如果是小公司使用也没有人管...尽量支持正版，做过设计，设计师也不容易。

2：把SVG格式的图标进行处理，推荐网站：http://www.iconfont.cn/或者http://fontello.com/，拖进来就可以了。

3：下载文件包括下面内容

dome.html文件就是显示的图标在网页中的显示情况，看看是不是都显示正常。

4：怎么使用在网页中，引入css文件，把图标名称写入class类就可以了。

当然，如果不想设计图标，也怕麻烦，也可以直接导入外部的图标库，比如：font-awesome

css文件<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">

这样不需要自己制作图标，不过当图标库进行更改是可能会影响自己的效果。不建议这样使用。

5:引入的图标css文件源码分析

在这里已mui框架的字体图标的CSS文件进行分析

@font-face {

font-family: MuiiconSpread;

font-weight: normal;

font-style: normal;

src: url('../fonts/mui-icons-extra.ttf') format('truetype'); /* iOS 4.1- */

}

.mui-icon-extra

{

font-family: MuiiconSpread;

font-size: 24px;

font-weight: normal;

font-style: normal;

line-height: 1;

display: inline-block;

text-decoration: none;

-webkit-font-smoothing: antialiased;

}

.mui-icon-extra-cold:before { content: "\e500"; }

.mui-icon-extra-share:before { content: "\e200"; }

.mui-icon-extra-class:before { content: "\e118"; }

.mui-icon-extra-custom:before { content: "\e117"; }

.mui-icon-extra-new:before { content: "\e103"; }

.mui-icon-extra-card:before { content: "\e104"; }

.mui-icon-extra-grech:before { content: "\e105"; }

.mui-icon-extra-trend:before { content: "\e106"; }

.mui-icon-extra-filter:before { content: "\e207"; }

.mui-icon-extra-holiday:before { content: "\e300"; }

特别需要注意的，当你每一次需要增加图标时，直接添加.mui-icon-extra-holiday:before { content: "\e300"; }这样代码是没有用的，因为前面还有几个关联文件，需要同时修改，因此尽量在生成图标的网站用自己的账号登陆，可以生成一个自己的图标库，可以长久保存使用。

相关文章：