有時看著螢幕腦中一直會想起一句話

「做法沒有好或不好，只有最適合」

我相信能說出這句話的人，不管是在處理什麼事
肯定是經過一番辛苦日子！ 由衷之言啊！

ps.我現在內心就一直在翻滾這句話呀～

昨天是分享用網路資源「Font Awesome」，處理在網頁處理上的icon小事
它是方便但總不可能收到的設計稿每回都是一樣地吧！？

今天就來整理一下及分享，這二天忙在icon上的小心得。

首先我們我們最常看到的應該是這種小icon：

這是網站上最基本會看到的
今天就用它來說明幾個做法啦～

懶人＋無設計要求法

//HTML 結構
<div class="wrap">
    <ul class="box1">
      <li><a href="">購物說明</a></li>
      <li><a href="">購物說明</a></li>
      <li><a href="">購物說明</a></li>
  </div>

 // 利用after選擇器+ content屬性，懶人法用文字代替 XD
.box1 {
     li {
        color: red;
        &::after {
          content: ">"; //利用字型或符號代表來做內容
          margin: 0px 13px 0 0;
          }
        }
 }

結果：

加註：如果設計不要求就給它偷吃步 ><

B＆F偽類法（Before/After）

//HTML結構
<div class="wrap">
    <ul class="box2">
      <li><a href="">購物說明<span></span></a></li>
      <li><a href="">購物說明<span></span></a></li>
      <li><a href="">購物說明<span></span></a></li>
    </ul>
  </div>

//SCSS結構
// 增加spen標籤 做一個正方型，再做旋轉角度
    .box2 {
        li {
            position: relative;
            padding-right: 25px;
        }
        span {
            display: block;
            position: absolute;
            top: 11px;
            right: 15px;
            width: 7px;
            height: 7px;
            border: solid red;
            border-width: 0 0.4px 0.4px 0;
            transform: translateY(-50%) rotate(-45deg);
        }
    }

結果：

加註：如果是單純的 < > 符號，
用border＋旋轉又快又好，還可以加粗變細或換色！
超方便的！

B＆F偽類+各式影像處理

//HTML

<div class="wrap">
    <ul class="box3">
      <li><a href="">購物說明</a></li>
      <li><a href="">購物說明</a></li>
      <li><a href="">購物說明</a></li>
    </ul>
  </div>

// 利用after選擇器＋背景影像設定
.box3 {
        li {
            display: inline-block;
            padding-right: 25px;
        }
        a {
            position: relative;
            padding-right: 25px;
            display: block;
            &::after {
                content: "";
                top: 0;
                right: 0;
                width: 18px;
                height: 18px;
                position: absolute;
                background: url(http://icons-for-free.com/icon/download-atm_bank_business_buy_cash_coin_conversion_dollar_ecommerce_economy_finance_financial_money_price_shop_sign_icon-313936.png) no-repeat;
                background-size: cover;
                
            }
        }

結果：

第三種方法好處就是將設計提供的精美小圖處理的精／細／美！
針對自定的圖示，用CSS的背景圖處理，是必用的方法啦

參考資料：

連至DEMO