1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. Heroicons 免費可商用的SVG圖示,同時可直接嵌入網頁中使用,並且利用CSS設定圖示的大小與顏色

Heroicons 免費可商用的SVG圖示,同時可直接嵌入網頁中使用,並且利用CSS設定圖示的大小與顏色

2020/09/07

梅問題-Heroicons 免費可商用的SVG圖示,同時可直接嵌入網頁中使用,並且利用CSS設定圖示的大小與顏色
  現在網路上有不少的免費圖示資源可使用,因此就不用自己畫半天,同時這些圖示也都會以文字的方式,嵌入到網頁中,並且再透過CSS就可設定圖示的大小、顏色,雖然說這些圖示都不大,但每次總得載入一大包,而實際用到的卻只用到幾個,所以梅干比較常使用IcoMoon用多少載多少,但有個麻煩的是,當下回要再增加時,就比較麻煩些。

因此最近梅干發現一個好用的平台,不但可以將圖示以SVG嵌入到HTML的網頁中,甚至還可以控制SVG圖示的大小與顏色,相當的方便,由於是直接嵌入HTML,因此在顯示上也更加的快速,雖然目前的圖示只有226個,但對於一般常用的指示符號還算齊全,最重要的是直接嵌入至網頁中,這點讓梅干覺得很方便!身為網設的朋友,也千萬別錯過了。


Heroicons
網站名稱:Heroicons
網站連結:https://heroicons.com/

Step1
首先在進入Heroicons的平台後,除了可從下方直接尋找外,也可透過上方的搜尋框,進行搜尋。
梅問題-Heroicons 免費可商用的SVG圖示,同時可直接嵌入網頁中使用,並且利用CSS設定圖示的大小與顏色
Step2
當找到喜歡的圖示後,將滑鼠移到圖示上方,再按一下「Copy SVG」。
梅問題-Heroicons 免費可商用的SVG圖示,同時可直接嵌入網頁中使用,並且利用CSS設定圖示的大小與顏色
Step3
接著再將它貼到HTML的網頁中,這邊梅干外層則利用了一個span標籤,將它包覆起來。
梅問題-Heroicons 免費可商用的SVG圖示,同時可直接嵌入網頁中使用,並且利用CSS設定圖示的大小與顏色
Step4
這時就可利用CSS來設定SVG的大小,但得特別注意到的是,在設定大小不是用font-size,而是用width甚至還可用color改變顏色。
梅問題-Heroicons 免費可商用的SVG圖示,同時可直接嵌入網頁中使用,並且利用CSS設定圖示的大小與顏色
Step5
除此之外,也可使用背景色,再加圓角框,就可將圖示,變成圓形鈕的效果,相當的方便也期待這平台,之後加入更多的圖示,而有需要的朋友,也趕快來試用一下囉!
梅問題-Heroicons 免費可商用的SVG圖示,同時可直接嵌入網頁中使用,並且利用CSS設定圖示的大小與顏色
#範例預覽: