A-Ming-Design

免費的線上icon圖示(Font-awesome)

2019 年 8 月 25 日

以往在架設網頁時,常會需要一些小圖示,但又不想花時間去設計圖示,畢竟那也是另一項成本。近幾年來大家常用的一個套件為「Font-awesome」,它的優點大致如下:
1、它並非點陣圖,因此無論圖示放多大都不會模糊。
2、是免費的套件,不用擔心版權等問題。
3、無須再請美工設計師幫忙,能節省時間成本。
4、使用方式簡單易懂。

【使用教學】


1、先連結到 cdnjs 網站去搜尋Font-awesome。 連結到cdnjs的網站

2、點選「Copy Script Tag」複製它的CSS(可選最新版)。 搜尋Font-awesome

3、將複製的東西貼到head區塊內。 Font-awesome使用方法

4、連結到Font-awesome 網站,去搜尋想要的圖示。 如何搜尋想要的圖示

5、點擊字串複製它。 如何取得程式碼

6、貼在你想要放置的區塊。 在HTML上如何撰寫

7、若想放大圖示,可直接增加一個「fa-2x」的class。 圖的大小修改方法-1

8、當然也可自行在CSS上修改樣式。 圖的大小修改方法-2

文章分類

  • RWD
  • CSS
  • 其它