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

iconfont阿里妈妈前端小图标使用方法详解

时间:2016-06-14 11:42:39      阅读:931      评论:0      收藏:0      [点我收藏+]

标签:

图标选购网址:http://www.iconfont.cn/
1.从阿里妈妈网站选购好小图标,加入购物车,下载好文件;
2.把字体文件放入字体(font)文件夹(tff)(woff),(eot)
3.样式表里面引入以下内容(../font 这个是根据相对路径做出相应的选择)
@font-face {font-family: ‘iconfont‘;
    src: url(‘../font/iconfont.eot‘); /* IE9*/
    src: url(‘../font/iconfont.eot?#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */
    url(‘../font/iconfont.woff‘) format(‘woff‘), /* chrome、firefox */
    url(‘../font/iconfont.ttf‘) format(‘truetype‘), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url(‘../font/iconfont.svg#iconfont‘) format(‘svg‘); /* iOS 4.1- */
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:12px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
4.html里面写以下内容
<b class="iconfont">写入图标编码</b>
5.新建一个选择器可以编辑文字大小颜色和其他属性
     <b class="iconfont icon">写入图标编码</b>
     .icon{font-size:14px;color:red;}

iconfont阿里妈妈前端小图标使用方法详解

标签:

原文地址:http://www.cnblogs.com/shiyou00/p/5583328.html

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