IconFont字体制作

1. 第一步。准备svg格式图片

2. 登陆http://iconfont.cn/网站，上传图标.

3. 选中需要制作成iconfont的图标。

4. 将选中的图标转储为项目

 

5. 下载至本地。

6. 使用：

    a. 引入下面四个文件

　　

    b. 添加css到css文件内

       

 1 @font-face {font-family: "iconfont";
 2   src: url('iconfont.eot'); /* IE9*/
 3   src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 4   url('iconfont.woff') format('woff'), /* chrome, firefox */
 5   url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
 6   url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
 7 }
 8 
 9 .iconfont {
10   font-family:"iconfont" !important;
11   font-size:16px;
12   font-style:normal;
13   -webkit-font-smoothing: antialiased;
14   -webkit-text-stroke-width: 0.2px;
15   -moz-osx-font-smoothing: grayscale;
16 }
　　/* content的内容为生成的iconfont文字编码， */
17 .icon-meiriyiti:before { content: "\e600"; }
18 .icon-xiaobaobiao:before { content: "\e601"; }
19 .icon-dabaobiao:before { content: "\e602"; }

       c: html内引用有两种方式。

              c1:  <i class="icon iconfont">&#xe600;</i>

　　　　　c2:  <i class="icon icon-meiriyiti"></i>

 

转载于:https://www.cnblogs.com/maduar/p/5274110.html