字体图标iconfont在:before/:after选择器中的使用方法

 每次看别人写的页面,字体图标怎么都在CSS中? 感觉有些略叼?于是乎仔细研究了一下。原来如此。

:before/:after是伪元素,如下:

其次,就是不管用【 Iconfont-阿里巴巴矢量图标库】还是【 Font Awesome】 

放在content 里,操作起来都是在伪元素的 content 加入不同的 Unicode 来渲染不同的图标的,

一般 Iconfont 的操作文档上实例,都是直接放在 html里的。如下:

<i class="iconfont i-search-bold">&#xe67e;</i>

上述的 &#xe67e; 那是字符实体编码,其中 &# 是开头用以标明这是字符实体,x表示这是十六进制。

而CSS的 content 接受的也是16进制的 Unicode编码,如此一来 就可以直接写成:

.i-v-left:before {
    content: "\e67e";
}

是不是很简单?快去试试吧。 

参看网络文档::before/:after里iconfont的使用方法

by不言谢

猜你喜欢

转载自www.cnblogs.com/byx1024/p/13163872.html