 |
| 這些是 Typicons 提供的圖示 |
阿舍是這陣子在用 Bootstrap 弄個簡單的 Web 機器人遙控界面的時候，發現 Bootstrap 有個叫做 Glyphicons 的東西，本來阿舍還沒搞懂這個 Glyphicons 是怎麼用的，後來，阿舍仔細的看了一下才知道，其實，這個 Glyphicons 就是向量字型的圖示，所以，可以很方便的利用 CSS 來操作哩 !
然後，阿舍覺得 Glyphicons 的圖型雖然還不錯看，但是，比較方正，阿舍沒有很喜歡，所以，阿舍就又去找了一下，就發現有不少的這類型的 Icon Font 可用哩 ! 下面這二套是阿舍比較喜歡，而且，有在用的哩 !
Typicons
Font Awesome
而下面這幾套則是阿舍覺得不錯又免費哩 ! 不過，要提醒一下，雖然，很多這類的 Icon Font 都是免費的，但是，有不少的字型是有要求要在使用的網站上標註字型的授權來源的，像 Glyphicons 的免費版本就有這項要求理，所以，使用前還是要注意一下囉 ...
Sosa
Open iconic (可不標示來源)
The Entypo Pictogram Suite (標示 copyright)
而用法的部份，每一家可能都會有一點點的不同，不過，首先，第一部通常就是要用 link 標籤把它們的 CSS 檔掛到網頁裡 ( 有的字型有提供 CDN 可直接連結，像 Font Awesome 就有提供，有的則是要自己下載後，上傳到自己的網站上，像 Typicons 就是哩 ! )
在網頁連結好各字型的 CSS 檔案後，接下，只要在要放上字型圖示的位置放上各字型所使用的字型和類型名稱就可以了，下面是阿舍有在用的 Glyphicons、Typicons 和 Font Awesome 三種字型的用法，以「首頁連結」加上一個圖示為例 ...
Glyphicons
<a href="/"><span aria-hidden="true" class="glyphicon glyphicon-home"></span></a>
Typicons
<a href="/"><span class="typcn typcn-home"></span> 首頁</a>
Font Awesome
<a href="/"><i class="fa fa-home"></i> 首頁</a>
上面有底線的部份就是每種字型不一樣的地方，而紅色字的部份則是要選擇的圖示的名稱，這個名稱可以從各個字型提供的圖示列表來查的到，通常是在列表上顯示或點選該圖示時會出現名稱的哩 ! ...
阿舍覺得加上這些圖示在網站上也滿好玩的，所以，如果你也覺得你的網站或部落格有點單調的話，就可以照阿舍上面提的方法來試試看，也許，會有煥然一的 Fu 哩 ! ....
註：
1. 如果想找更多好用和有趣的字型的話，用「icon font」關鍵字就可以找到不少哩 ! ...
2. IE 早期版本對於這種 Icon Font 的支援有限，會有無法顯示的問題哩 ! ... 服用前請小心 ...
推薦閱讀
- 問題沒解決嗎? 更多的 Ubuntu 教學在 這裡
- Prompt Injection: 提示詞注入安全漏洞
- 二款 Mac 無痛安裝的 Stable Diffusion 軟體
- 用 AI 寫部落格文章好不好 ?
- 沒有免費的 Midjourney 和 Colab 又不想花錢怎麼辦 ?
- 不學 Prompt 技巧也能善用 ChatGPT 的簡單方法
- 企業 AI 應用：不只是聊天機器人
- Automatic 比 Automatic1111 更好用 ? 都是 Stable Diffusion WebUI
- Stable Diffusion 的 /describe 圖生文功能
- AI 畫出讓人可怖的美圖 ！
有疑問？ 問題還是沒解決嗎? 歡迎下方留言提問和討論 😁
沒有留言 :
張貼留言
歡迎留言提問和討論 .... 😁