iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 26
0
自我挑戰組

蛻變事實-UI設計師勇闖前端城系列 第 26

[蛻變事實/D26] 設計師勇闖前端城-(處理icon的那些小事-P1)

以前的網頁設計,輸出的圖片格式常見是jpg、png、gif格式
但現在考量RWD或更大解析度的螢幕使用介面,圖片格式大已改為提供SVG檔給前端切版

每收設計稿時icon的處理做法我會有幾種,而今天先來說說我最方便處理icon的工具。


利用線上免費圖示平台 -Font Awesome


好處:

  • 目前1400個免費高品質的圖示(一直有在增加)
  • 無極縮放RWD沒問題
  • 換色如換衣,可以指定顏色、背景色!
  • 還有支源各開發工具
  • 支援LESS與SASS(我是SASS使用者啊~)

「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>

參考資源:


上一篇
[蛻變事實/D25] 設計師勇闖前端城-(懶得用腦:完美Lightbox套件包)
下一篇
[蛻變事實/D27] 設計師勇闖前端城-(處理icon的那些小事-P2)
系列文
蛻變事實-UI設計師勇闖前端城35

尚未有邦友留言

立即登入留言