現在有許多網站都提供免費的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> Home</a> <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Library</a> <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a> <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Settings</a> </div>
在加一些CSS的修飾，就可以做成條列的效果
趕快去Font-Awesome看看吧
0 意見:
張貼留言