字体图标
使用自定义字体的方式,实现图标
优点:
(1)很容易的任意缩放
(2)很容易的改变颜色
(3)很容易的拥有透明效果
(4)很容易的产生阴影
(5)可以得到CSS很好的支持
(6)浏览器支持很好(IE8+)
字体图标库
http://fontello.com/
http://www.iconfont.cn/ /*常用,阿里巴巴*/
引入
@font-face{
font-family:"myfont"; /*定义的字体名*/
/*阿里示例,下面的代码都是为了兼容*/
src: url('../font/iconfont.eot');/* IE9*/
src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */url('../font/iconfont.svg#iconfont') format('svg'),
url('../font/iconfont.ttf') format('truetype'),/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('../font/iconfont.woff') format('woff');/* iOS 4.1- */
}
.abc{
font-family:"myfont";/*使用上面定义的字体名*/
}
下面要注意一下,在视频中使用了伪类before,来将图标插入指的的类前,
视频中大致是这么写的:
.abc{
font-family:"myfont";
}
.icon-user:before{
content:"\e745";
}
.icon-color{
font-size:32px;
}
<span class='abc icon-user icon-color'>用户</span>
这边通过伪类将图标插入前面,优点是图标的样式更加灵活不需要跟元素的文字保持一致,可单独修改,而且节省了html代码,灵活性更高
而我在实际的操作中,通过阿里图标矢量库中下载到的字体编码为:๴,将字体编码放入代码中,如下所示,
.abc{
font-family:"myfont";
}
.icon-user:before{
content:"๴";
}
.icon-color{
font-size:32px;
}
<span class='abc icon-user icon-color'>用户</span>
发现 图标并没有显示,因此查询了许久,发现字体编码这个 是实体字符(为了告诉网页需要显示,类似于实体字符上的空格之类的),不能直接在伪类中使用( 在网页中可以直接使用,不需要转换,但是在伪类中不行), &#这个开头标注是实体字符, x表示十六进制,而 CSS的content接受的也是16进制的Unicode编码,因此在css伪类中,应该去掉&#x,并用 \ 代替,应该写成content:'\e74'在查询这个资料时,看到阿里巴巴上面写的新的引用字体图标方式:symbol引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:
1.支持多色图标了,不再受单色限制。
2.通过一些技巧,支持像字体那样,通过font-size,color来调整样式。3.兼容性较差,支持 ie9+,及现代浏览器。
4.浏览器渲染svg的性能一般,还不如png。
但是由于兼容性问题,暂不深入了解,但是说是未来的主流,应该多加留意