ICONO 一個標籤實現的純CSS圖標

ICONO - 仅一个标签实现的纯CSS图标

圖標在WEB和APP設備上是很常用的設計元素,有些網站為了兼容高分辨率的顯視屏,比如蘋果Retina設備,一般使用網頁圖標字體或是SVG的圖標,麻煩一點就是做多套不同大小的圖標。除此之外,還有一個方案就是用CSS實現圖標了。今天向大家介紹一套使用純CSS繪製的圖標,只需要一個html標籤就能實現,圖標也是網站常用的ICON,所以可以嘗試在你的網站項目上使用。

使用純CSS編寫的圖標比其它圖標體積小很多,雖然如此,但不少前端人員不願意或不懂得用CSS繪製,而且還有兼容性問題。當然如果只需要兼容流行的瀏覽器,可嘗試用ICONO這套圖標。

使用方法

使用方法

STEP 1: 嵌入CSS文件

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

STEP 2: 給標籤加上圖標的class,如下例子:

 

<i class="icono-mail"></i>

<div class="icono-mail"></div>

<span class="icono-mail"></span>

<whatever class="icono-mail"></whatever>

TIPS: 如果想改變顏色,參考下面樣式:

i.heart{color: red;}

兼容性

支持CSS3的瀏覽器一般都可以正常顯示,比如IE9+, Chrome, Safari, Opera等。所以IE8是不支持了

下載和演示,可以到ICONO網站:http://saeedalipoor.github.io/icono/

廣告

One thought on “ICONO 一個標籤實現的純CSS圖標

  1. 引用通告: ICONO 一個標籤實現的純CSS圖標 | * Welcome to Eating_Chen's World *

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s