以前的網頁設計，輸出的圖片格式常見是jpg、png、gif格式
但現在考量RWD或更大解析度的螢幕使用介面，圖片格式大已改為提供SVG檔給前端切版
每收設計稿時icon的處理做法我會有幾種，而今天先來說說我最方便處理icon的工具。
好處：
「Font Awesome」是普及化的免費圖示平台
雖然有也有分免費＆付費，但對於一般網站上需要的圖示它都已涵蓋
如：社群媒體的、箭頭符號、會員、表格等等小icon，幾乎都有了～
而用法也很方便！
[step-1] 在和head中間插入:
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
[STEP－2] 找到你要的符號碼（點擊上方就可以自動複製你的html碼囉！）
[STEP－3] 在HTML裡加入i 相關設定
<nav>
<i class="fa fa-heart"></i>
</nav>
iThome鐵人賽
看影片追技術