码迷,mamicode.com
首页 > 其他好文 > 详细

Iconfont 字体图标

时间:2017-08-01 16:38:15      阅读:249      评论:0      收藏:0      [点我收藏+]

标签:com   pre   引用   size   生成   pen   cal   代码   anti   

1、Iconfont官网把需要的图标放到购物车,然后生成自己的项目。

 

技术分享

技术分享

 

2、然后生成代码代码链接。

技术分享

 

 

3、然后再css中引入刚才的代码。

@font-face {
  font-family: ‘iconfont‘;  /* project id 371185 */
  src: url(‘//at.alicdn.com/t/font_sdxyjnt7xf8estt9.eot‘);
  src: url(‘//at.alicdn.com/t/font_sdxyjnt7xf8estt9.eot?#iefix‘) format(‘embedded-opentype‘),
  url(‘//at.alicdn.com/t/font_sdxyjnt7xf8estt9.woff‘) format(‘woff‘),
  url(‘//at.alicdn.com/t/font_sdxyjnt7xf8estt9.ttf‘) format(‘truetype‘),
  url(‘//at.alicdn.com/t/font_sdxyjnt7xf8estt9.svg#iconfont‘) format(‘svg‘);
}

.iconfont{  
    font-family:"iconfont" !important;  
    font-size:15px;
    font-style:normal;  
    -webkit-font-smoothing: antialiased;  
    -webkit-text-stroke-width: 0.2px;  
    -moz-osx-font-smoothing: grayscale;
} 

 

4、html中引用。

<i class="iconfont">&#xe63f;</i>

 

Iconfont 字体图标

标签:com   pre   引用   size   生成   pen   cal   代码   anti   

原文地址:http://www.cnblogs.com/wenxiangxu/p/7268946.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!