Material Symbols & Icons:Google Fonts 所推出圖示字型,還有 SVG 及 PNG 可選

Material Symbols & Icons:Google Fonts 所推出圖示字型,還有 SVG 及 PNG 可選

Material Symbols & Icons 是一套由 Google Fonts 所推出的圖示字型,將超過 3,216 個字形整合到一個字體檔案中,並具有多種設計變體。每種圖示都提供 Outlined、Rounded 及 Sharp 三種樣式以及 Fill、Weight、Grade 及 Optical Size 四種可調節的可變字體樣式,並讓使用者自行選擇要以字型或是 SVG、PNG 圖檔格式下載。使用者可以在線上自行操作設定圖示並複製所提供的 CSS 及 HTML Code,輕鬆將其應用到自己的 Wwb、Android 或是 iOS 專案中。此外,該圖示套件還支援 Figma Plugin,在 Figma 中輕鬆使用。Material Symbols & Icons 採 Apache license 授權,這表示不論是個人還是商業使用均可。

Ionicons:免費圖示字型與 SVG,Outline、Filled 及 Sharp 多變體開放原始碼

Ionicons:免費圖示字型與 SVG,Outline、Filled 及 Sharp 多變體開放原始碼

Ionicons 是一套開放原始碼圖示字型集,其 7.1.0 版本包含了 1,300 個專為 Web、iOS、Android 和桌面應用程式製作的圖示。這個字型集專為 Ionic Framewor k設計,實現了應用程式中 Material Design 和 iOS 風格的統一使用。每個 Ionicons 圖示都提供 Outline、Filled 和 Sharp 三種不同風格的選擇,同時支援 Ionicons Web Component 用法。這種用法能夠動態載入 SVG,有效減少應用程式載入時的資源開銷,提高圖示顯示效率。Ionicons 採用 MIT 許可證,允許商業使用,為應用程式圖示的顯示提供更大的靈活性和效率!

ICON8 Line Awesome 提供 1380+個精美圖示字型 免費使用

ICON8 Line Awesome 提供 1380+個精美圖示字型 免費使用

圖示字型有方便快速使用的優點,但也因為是字形所以有色彩表現單一的缺點,要使用圖示字型,我們有 Google Icon FontTaiwan Icon FontIcon Font 或是 Font Awesome 可以選擇,而 Line Awesome 這個圖示字型則是由 ICON8 提供,約有 1380 個可應用,其將圖示以 Accessibility、Alert、Animals、Arrows、Audio & Video、Automotive、Brand Icons...等分類顯示,方便使用者查找,而網頁常用的 LINE、Telegram、Facebook...等分享圖示也均有提供,如果在其他圖示字型提供者找不到的圖示,都可以來這裡試試。

IcoFont 提供超過 2100個圖示字型免費使用

IcoFont 提供超過 2100個圖示字型免費使用

圖示的表達會比文字描述更乾淨俐落,就像 line 會將一些輸入的詞語轉成圖示來表示一樣,而在網頁中如果要使用圖示表達像是鈴鐺、電子郵件或是分享按鈕,傳統的做法可以使用圖片,也可以使用 SVG 向量圖檔,然而最簡便的方式還是使用圖示字型。
GoogleFont Awesome 均有提供可免費運用到網頁內的圖示字型,而 IcoFont 也是如此的應用,其提供超過 2100個圖示,透過 CSS 的引用,使用者就可以使用 Markup、Hex 或是 HTML Entity 語法來成呈現圖示,另外,每個圖示亦提供 SVG 向量圖型下載,讓應用更為全面。

如何讓 Font Awesome 的圖示字型也可以應用在 Word、記事本?

如何讓 Font Awesome 的圖示字型也可以應用在 Word、記事本?

使用文書編輯軟體時,如果碰到要使用圖示來代替文字,例如一個電話或是一個小鈴鐺的圖示,通常的做法就是去找個圖檔來使用,然後調整其大小及其位置,相當麻煩,但如果該圖示可以像打字般的打上一個字的使用方式,相信會更簡單些。Font Awesome 是個以字型的方式來運用圖示的圖示字型,其圖示的類型更是包羅萬象,以往我們都會將其運用在網頁上,而如今也推出 Windows、Mac 可以安裝的 OpenType 圖示字形檔,透過安裝,我們可以將其運用在 Word、PowerPoint、記事本或是 Photoshop 之類的圖形編輯軟體上,讓圖示的顯示就像打字般的簡單。

如何在網頁中使用 Google Icon Font 免費圖示?

如何在網頁中使用 Google Icon Font 免費圖示?

「圖示」運用得當,絕對勝過用文字描述,以往要在網頁裡使用圖示,可以使用圖檔,但不論是要更改尺寸、顏色都相當麻煩,而現在大多使用 Icon Font,將圖示變成字形來使用,這樣一來不論日後維護要改尺寸大小、顏色就相當方便,「Google Font」內現在就有提供成套風格且免費的 Icon Font 供使用者應用,如果習慣使用圖檔,每個圖示同樣都有提供 PNG、SVG 圖檔格式,不論是應用在網頁、Android 或是 iOS 都不是問題。

Taiwan Icon Font 以台灣特色所設計的圖示標誌

Taiwan Icon Font 以台灣特色所設計的圖示標誌

TW Icon Fonts 是一個以台灣為主要出發點,用台灣專屬的特色打造出可用於 web 的 wtf、wtf2、svg 格式,桌面使用的 otf 格式,可供 Illustrator,Sketch、 Word、PowerPoint 等軟體來使用,第一個版本是以「台灣旅遊」為主要發想,提供台灣的旅遊景點圖示,內容包含有中華民國國旗、台灣、澎湖群島、龜山島、中正紀念堂、總統府、台北101、故宮博物館、國民革命忠烈祠、龍山寺、國父紀念館、孔子廟、饒河夜市、自行車道、小紅人、小綠人、全民健康保險、珍珠奶茶、台灣啤酒、春聯...等等,共 100 個,圖示具備可縮放、變換色彩等文字相關特性,也能透過 CSS 載入到網頁,持續更新,完全免費。