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

图标选购网址：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;}