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

作者: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 许可协议。转载请注明出处!


 请勿发布不友善或者负能量的内容。审查将对发布广告等违规信息进行处罚!