font-awesome基礎教學

Icons

fontawesome主要就是用來取得一些漂亮的圖標的，

以下這些是常用的前端圖標庫:

1. fontawesome
2. fontello
3. livicons
4. ionicons
5. material
6. iconfont (阿里巴巴)
7. ★★★ thenounproject : 大推這個，可以下載svg圖形
8. ★ SVG背景圖片下載: svgbackgrounds.com

每一種都有提供CSS, JS等等幫助您快速應用，而本篇只講fontawesome

cdnjs, jsdelivr, unpkg

取得線上的CSS, JS

• cdnjs.com/libraries
• tableexport.jquery.plugin
  • 點進去下方有一個搜尋，輸入之後可以搜尋到npm有的項目
• https://unpkg.com/
  • 例如: jspdf.umd.min.js

搜尋自己要的套件，有名的套件應該都可以找的到

SRI Hash

Generate Subresource Integrity (SRI) attributes

通常我們會在CSS或者JS中新增:integrity=sha...來防止文件被串改的可能性發生

https://www.srihash.org/ 可以幫助您產生，把資源的連結貼上去即可

免費版本常用的icon

• 下載:

  <a href=""><i class="fas fa-download fa-2x"></i></a>
  

• (可當作hugo, autohotkey等等)

  <i class='fas fa-h-square' style='color: #e844a8'></i>
  

• 動物-龍:

  <i class='fas fa-dragon' style='color: #FF0000'></i>
  

• book:

  <i class="fas fa-book-open fa-2x" style="color:#fd7e14;"></i>
  

• link:
  my_link

  <a href="#"><i class="fas fa-link fa-2x" style="color:#fd7e14;"></i><br>my_link</a>
  

搭配bootstrap

Glyphicons

它的圖形主要是靠css的影響所繪出

但一個缺點是它的css和一般的bootstrap.css有點不同，它的是

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!--
比較常用的css應該是下面這個
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
-->

bootstrap有提供一些glyphs可以用，您可以至連結參考到更多的用法以及可以用的圖標有哪些，這邊我舉一個例子如下

<button type="button" class="btn btn-default btn-sm">
  <span class="glyphicon glyphicon-trash"></span> Trash
</button>

button

• link:
  Google

  <button class="btn btn-primary" type="button"
    onclick="location.href='https://www.google.com/'"  {{/* 按鍵也可以變成連結，不建議用a來取代按鈕，有些樣式會跑掉 */}}
  ><i fas fa-link fa-2x></i>  {{/* fontawesome的圖標放這邊 */}}
  <br>Google  {{/* 利用br來換行，模擬文字在按鍵下方 */}}
  </button>
  

• btn+fontawesome+tachyons:

  <button class="btn btn-secondary"> {{/* bootstrap */}}
  <i class="fas fa-undo  {{/* fontawesome */}}
  hover-yellow"></i> {{/* tachyons */}}
  </button>
  

Emoji of Unicode

getemoji.com

其實Unicode您也可以在這個 網站 上就可以看見了，在比較下面的地方有一個Codepoints，可以看見UNICODE碼位

相關連結

• emojipedia
• How can I create a text box for a note in markdown?

在.github文件夾中可能有用的圖標

github中README可能可以用到的圖標

• 🔭 I’m currently working on …
• 🌱 I’m currently learning …
• 👯 I’m looking to collaborate on …
• 🤔 I’m looking for help with …
• 💬 Ask me about …
• 📫 How to reach me: …
• 😄 Pronouns: …
• ⚡ Fun fact: …

Shields.io

蒐集一些我認為比較有用到的圖例

成品	說明	代碼
	可以用圖片+連結的方式來呈現	[](https://play.golang.org/p/eqjvu-vO8sr)