自從用顏文字後，就開始想說有些有趣的 icon 也想要放在 blog 使用！ 找來找去，就決定掛這個 Font Awesome CSS icon ！ 此篇文章教學如何掛在 blogger 內 & 使用的教學！ヽ(ﾟ∀ﾟ)ﾒ(ﾟ∀ﾟ)ﾉ
安裝工具：
首先，到網站的 Get Start ．在blogger（或網站）的原始碼 <Head> 放上這段語法：
Paste the following code into the
<head> section of your site's HTML.<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
使用方式：網站範例 Example
在 HTML 編輯器內，將語法貼上，前台就會顯示 CSS icon 圖案囉！
編輯中：
顯示的樣子：
調整大小：
CSS icon 的好處就是可以用網頁語法做很多種變化，最常使用的就是調整大小啦！
在範例裡面有教學如何調整，只需要在與法中加上 fa-尺寸，就能夠隨心所欲地把 icon 做成想要的樣子囉～～～
調整顏色：
<i class="fa fa-smile-o fa-2x" style="color: red;">
與修改 CSS 調整字體一樣，加上此段語法就可以修改顏色囉！ 若是會使用漸層效果的人可以改看看囉～
網頁色碼
提醒一下，CSS icon 圖案無法直接在網頁上複製，它是用程式跑出來的溜～ (≧ω≦)
- - - - - - - - - - - - - - - - - - - - - - - - ♥ 以上小小分享 ♥ - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - ♥ 相關連結 ♥ - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Font Awesome
Font Awesome
- - - - - - - - - - - - - - - - - - - - - - - - - - - - ♥ 延伸閱讀 ♥ - - - - - - - - - - - - - - - - - - - - - - - - - - - -
部落格可愛圖案 css icon 符號 小圖 表情符號 html 原始碼 加圖片 編輯器 顏文字
喜歡這篇文章的話，請幫麥菈菈點個讚歐 ♥(✿ฺ´∀`✿ฺ)ﾉ
♥ ♥ 每個推薦&讚都是帶給麥菈菈持續分享的動力♥ ♥
MaiLala 在 Facebook!
MaiLala 在 Facebook!
♪~(♥ω♥ ) 更多文章在麥菈菈's Blogger (♥ω♥ ) ~♪
沒有留言:
張貼留言
歡迎推薦文章或分享、留言。