网页中图标用字体实现方法
我们做网页时候遇到的一些小图标,一般来说我们想到的方法就是切图,填充背景图片之类的。现在有另一种更方便的不用切图也可以实现,就是字体图标,导入字体,调用来实现。
代码如下:
<p><i class="wotaoo_font color_f60"></i><a href="">首页</a></p> <p><i class="wotaoo_font color_f60"></i><a href="">收藏</a></p> <p><i class="wotaoo_font color_f60"></i><a href="">下拉</a></p> <p><i class="wotaoo_font color_f60"></i><a href="">购物车</a></p> <p><i class="wotaoo_font color_f60"></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 许可协议。转载请注明出处!