网页中图标用字体实现方法

作者：Liaodeity - 2015年04月27日

我们做网页时候遇到的一些小图标，一般来说我们想到的方法就是切图，填充背景图片之类的。现在有另一种更方便的不用切图也可以实现，就是字体图标，导入字体，调用来实现。

代码如下：

<p><i class="wotaoo_font color_f60">&#xe64a;</i><a href="">首页</a></p>
<p><i class="wotaoo_font color_f60">&#xe65f;</i><a href="">收藏</a></p>
<p><i class="wotaoo_font color_f60">&#xe6b0;</i><a href="">下拉</a></p>
<p><i class="wotaoo_font color_f60">&#xe661;</i><a href="">购物车</a></p>
<p><i class="wotaoo_font color_f60">&#xe61c;</i><a href="">二维码</a></p>

.color_f60 { color: #f60; }
@font-face{
		font-family: "icon";
		src: url("../fonts/iconfont.eot"); /* IE9 兼容模式 */
		src: url("../fonts/iconfont.eot?#iefix") format("embedded-opentype")
			 ,url("../fonts/iconfont.woff") format("woff")
			 ,url("../fonts/iconfont.ttf") format("truetype")
			 ,url("../fonts/iconfont.svg") format("svg");
		font-weight: normal;
		font-style: normal;
	}
.wotaoo_font {
	font-family: icon;
}

还有记得放进来fonts文件夹。这样就可以实现了，并不难。大家可以尝试一下。字体的话网站可以下载，这里介绍一个很好的字体图标网站给大家https://icomoon.io/

本文作者： Liaodeity

本文链接： https://www.jianbaizhan.com/article/206

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！