歡迎光臨
每天分享高質量文章

免費套圖:一套非常不錯的 SVG 圖標

Glyph 是 SmartIcons 出品的一套 SVG 圖標,看起來非常不錯,將近 800 個圖標。他們在官網宣稱:

Icon font is so yesterday. Say hello to “Glyph”, a semantic and versatile SVG icon set designed for customization.

Icon font 已是昨日黃花。擁抱 Glyph 吧,一套語意化通用的 SVG 圖標集,為定製化而生。

下載鏈接:https://github.com/frexy/glyph-iconset/archive/master.zip

有多種使用方法

IMG 標簽

Inline SVG

或者把 SVG 內容複製粘貼到 HTML 檔案中

SVG Sprite

SVG 圖標最優美的使用方式是 SVG sprite,示例 sample.html.



這種方法利用 標簽,從 HTML 中的 SVG spirte 檔案取 SVG 內容。

Style with CSS

通過 inline SVG 和 sprite 方法,也可以輕鬆用 CSS 改變圖標風格。如下:

改變整套圖標的風格

.si-glyph * {

fill: red;

}

改變指定圖標的風格

.si-glyph-bubble-message-hi {

fill: blue;

}

這套圖標遵循 CC BY-SA 4.0 協議。

來自:伯樂頭條

鏈接:http://top.jobbole.com/21893/

赞(0)

分享創造快樂