标签:
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