[分享] Font Awesome 還可以這樣用

招聘教程、魔改教程與加餐,或甚至是 Bootsnip 上的模板資源,處處可見 Font Awesome 的蹤影,跟大家分享幾個開發上用到的豆知識。


1. Brand Icons — 讓你一口氣備齊國際大牌 icon

想要在網站上羅列知名企業,相較於一個個找圖、還要煩惱圖的品質和大小,直接使用 Font Awesome 所提供的 brand icons 相當省時省心。

  • 你可以在 Font AwesomeBrand Icons 區塊找到琳琅滿目的全球知名企業或品牌:

  • 點圖可以看到代碼示範:

    <i class="fa fa-weibo" aria-hidden="true"></i>
    

​有注意到 class = fa fa-<企業或品牌名稱> 這個相當直覺的使用方式嗎?所以你甚至不需要點圖進去看代碼,直接替換成品牌或企業名稱即可。


2. Font Awesome Size — 讓 icon 縮放自如

教程中我們把小小的 icon 用在同樣小小的按鈕上,但我們可以讓它縮放自如;只要在 icon 的代碼後面加上 fa-lg (lg = large,增大 33%)或是: fa-2xfa-3xfa-4xfa-5x,就能放大我們所用的 icon。

  • 範例代碼:
    <i class="fa fa-google fa-5x"  aria-hidden="true"></i> 
    <i class="fa fa-apple fa-5x"  aria-hidden="true"></i> 
    <i class="fa fa-weixin fa-5x"  aria-hidden="true"></i>
    
  • 實際運用在作品中可以達到以下效果:


3. 別讓 Font Awesome 亂了你的排版

在製作招聘網站時,為了美觀,我們把 (Hide) 跟 (Public) 兩種狀態改用 Font Awesome 的圖示呈現,一個鎖,一個地球。

然而,因為地球跟鎖的「圖示寬度」不同,所以在不同狀態下,文字排版會不一致。當我們執行 Publish / Hide 時,甚至會覺得表格裡的字左右移動。像這樣:



既然我們觀察到原因出在「圖示寬度」,我們就對症下藥,用 Font Awesome Examples 所提供的解決方式:在 class="fa fa-unlock" 以及 class="fa fa-globe" 中加入 fa-fw 固定圖示寬度。

<% if job.is_hidden %>
    <%= link_to publish_admin_job_path(job), :method => :post, class: "btn btn-xs btn-success" do %>
      <i class="fa fa-unlock fa-fw"></i> 
    <% end %>
<% else %>
    <%= link_to hide_admin_job_path(job), :method => :post, class: "btn btn-xs btn-warning" do %>
        <i class="fa fa-lock fa-fw"></i>
    <% end %>
<% end %>

短短五字,輕鬆解決!點擊 Publish / Hide 按鈕的瞬間,就不會再因為地球跟鎖的「圖示寬度」而有排版移動的感覺。


4. Font Awesome Examples — 簡單易懂的各式範例

Font Awesome Examples:提供官方範例。裡面有很多很棒的 Font Awesome 圖示使用、代碼示範,失誤率極低,非常推薦利用!




本次大賽我的網站主題是:Quick Hunt。作品持續優化中,歡迎投票或留言給予反饋。

目前進行中 & 過往 Logdown 分享:

Comments

comments powered by Disqus