Ionic Icon front Free – 免費的 Ionic Icon font ionicons.com

今天為自己寫了一個筆記..
方便自己在開發用Ionic Framework寫的 Mobile Applications
時加 icon / button icon

像我這一類的沒有藝術感/美感的 developer..
找到些Bootstrap / icon / graphic pack 或容易用的framework來解決手機程式介面設計十分重要
很多時候我的程式開發停滯完成不了..主要是因為想不到怎樣完成UI/UX

今天和大家介紹的這個一網頁..他有很多的Icon Font
Ionicons
http://ionicons.com/
Ionicons.com

當大家開始寫Ionic時..這些Icon font已經包含在你的Project上
但是怎樣知道怎樣可以apply 這些Icon font

使用方法十分簡單
我們只需要在 HTML/Ionic tag上加上相對的CSS Class 便可以
E.G.
如果我想在我程式上的 Button 加上一個 volume的 icon 我可以 用以下的Mark up

  <button class="button button-balanced icon ion-volume-high"></button>

怎樣知道那個Icon Font的CSS Class是什麼?
http://ionicons.com/
當大家進入了網頁之後..
只需要選擇想使用的Icon之後他便會顯示相對的CSS Class 名稱..
Font Icon for Ionic Framework Application

Hope you find it useful

Leave a Reply