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

免費套圖:一套非常不錯的 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)

分享創造快樂