天天看點

[前端] 項目中的ICONO 純 CSS 繪制的一套圖示庫

icono是一套使用純CSS3制作的CSS圖示。icono可以使用所有的HTML元素來制作圖示,如 <i> 、 <div> 、 <span> 等等。

使用方法

首先你需要将 icono.min.css 檔案加入到HTML文檔的頭部。

<link href="css/icono.min.css" rel="stylesheet">           

複制

然後可以在任意的html标簽上添加所需要的圖示的class。

<i class="icono-mail"></i>
 
<div class="icono-mail"></div>
 
<span class="icono-mail"></span>
 
<whatever class="icono-mail"></whatever>           

複制

ICONO是一套使用CSS 繪制的圖示庫。 優點是不包含任何其他依賴,體積較小min+gzip後隻有 7kb,包含137個圖示。

但是CSS圖示的缺點也很明顯,不能像字型圖示一樣那麼簡單就能修改圖示大小。CSS繪制的圖示,修改大小隻能通過一些其他的方式,我是用 CSS3 的 transform:scale(0.5)來進行圖示的大小修改。

總的來說,這套用CSS繪制的圖示,作為日常使用也是夠夠的了,特别是追求減少請求體積的開發者們。

可以去這裡檢視示範

http://www.htmleaf.com/Demo/201501091146.html