2015年4月9日 星期四

[筆記] 如何使用Font Awesome所提供的各種icon


現在有許多網站都提供免費的icon可供下載使用,而Font-Awesome就是其中一個相當簡單又好用的!

在Font Awesome這個網站中,提供了相當多好看的icon,只要遵循CC3.0的規範下,大家都可以自由取用,而且使用方法相當簡單!


step 1在<head>和</head>中間插入以下語法

首先,連到Font-Awesome的網站,在Get Started的地方,就有教我們要如何在網頁中使用它

我們這裡,選擇它所提供的方法中,最簡單的一種,透過這種方法,我們不需要下載任何圖片


首先只要到<head>和</head>中間,插入下面藍色那段語法,如下:
<head>
    <meta charset="UTF-8">
    <title>Fontawesome Demo</title>
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>

step 2選擇喜歡的icon

接著就可以到icon的地方,搜尋任何你想要的icon,這裡我搜尋「like」


 每一個icon都有許多不同的大小,下面就提供了插入的語法


讓我們把它插入網頁<body>和</body>中,像是這樣子:
<body>
<i class="fa fa-thumbs-o-up"></i>
</body>

這時候預覽的話,就已經會看到一個icon了,只是icon非常的小...


step 3調整成想要的功能

在剛剛icon的下方,有個example可以點,在這裡面,你就可以看到各種使用這個icon的功能,在範例中就有說明怎麼樣可以把icon變大


原來只要在每個class的最後面加上fa-大小就可以了,所以我們把我們的程式碼改成這樣:
<body>
<i class="fa fa-thumbs-o-up fa-lg"></i>
<i class="fa fa-thumbs-o-up fa-2x"></i>
<i class="fa fa-thumbs-o-up fa-3x"></i>
<i class="fa fa-thumbs-o-up fa-4x"></i>
<i class="fa fa-thumbs-o-up fa-5x"></i>
</body>

這時候就會看到由大到小的icon啦,可以挑一個適合自己網頁大小的使用


調整大小是最簡單的一種用法,在exmaples還有很多的語法可以套用,像是我們也可以插入下面的語法:
<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>

在加一些CSS的修飾,就可以做成條列的效果

有興趣的可以再去看更多不同的範例,裡面還包含許多動態圖示的用法,

趕快去Font-Awesome看看吧
Share:

0 意見:

張貼留言