字體圖標iconfont在:before/:after選擇器中的使用方法

 每次看別人寫的頁面，字體圖標怎么都在CSS中？ 感覺有些略叼？於是乎仔細研究了一下。原來如此。

 

:before/:after是偽元素，如下：

其次，就是不管用【 Iconfont-阿里巴巴矢量圖標庫】還是【 Font Awesome】 

放在content 里，操作起來都是在偽元素的 content 加入不同的 Unicode 來渲染不同的圖標的，

 

一般 Iconfont 的操作文檔上實例，都是直接放在 html里的。如下：

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

上述的  那是字符實體編碼，其中 &# 是開頭用以標明這是字符實體，x表示這是十六進制。

而CSS的 content 接受的也是16進制的 Unicode編碼，如此一來 就可以直接寫成：

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

 

 

是不是很簡單？快去試試吧。 

參看網絡文檔：:before/:after里iconfont的使用方法

 

 

by不言謝