icon小圖標
阿新 • • 發佈:2017-09-23
for 計算 div ram app str 字體 如何 方法
要使用自定義字符,大致步驟是:
IcoMoon App
Ionicons: The premium icon font for Ionic Framework
Fontello - icon fonts generator
在網頁中插入icon圖標的方法總結
- CSS Sprite
- font + HTML
- font + CSS
其中不太明白的是\f309
這一段css表示:
在節點#twitter前面,插入一段內容("\f309")。
這個內容("\f309")是一個字符,f309是這個字符的16進制unicode編碼。
不理解可以把 "\f309" 改成 "\6211" ,然後查看效果。事實上 content:"我" 和 content:"\6211" 的含義是一樣的。
需要知道,計算機裏面每個字符都有一個unicode編碼,比如「我」的unicode是6211(16進制),而字體文件的作用是規定某個字符應該用什麽形狀來顯示。
unicode字符集裏面,E000 至 F8FF屬於用戶造字區。原本是空的,用戶可以在字體文件裏面隨便定義這些字符的形狀。我們所見的webfont icon,一般就選在這一部分。
(上面這段講得可能不專業,大致知道是這麽一回事就行。)
- 自己造一個字體文件,把e000所對應的字符形狀畫上新浪的icon,保存為常用字體文件格式。
- 在css中使用font-face引用這個字體文件,任意命名(不和已有的重復,比如叫myfonticon)
- 需要顯示圖標的地方定義font-family為myfonticon,content屬性設為"\e000"。
造字可以用Fontographer 5,參考這篇文章webfont應用系列(二)如何制作圖標字體?
其實網上已經有一大堆免費好用webfont icon,比如:IcoMoon App
Ionicons: The premium icon font for Ionic Framework
Fontello - icon fonts generator
icon小圖標