【網路】Font Awesome CSS icon 安裝&使用教學 <i class="fa fa-thumbs-o-up"></i> - ...

【網路】Font Awesome CSS icon 安裝&使用教學


自從用顏文字後,就開始想說有些有趣的 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


- - - - - - - - - - - - - - - - - - - - - - - - - - - - ♥ 延伸閱讀  - - - - - - - - - - - - - - - - - - - - - - - - - - - -

部落格可愛圖案 css icon 符號 小圖 表情符號 html 原始碼 加圖片 編輯器 顏文字

  喜歡這篇文章的話,請幫麥菈菈點個讚歐 ♥(✿ฺ´∀`✿ฺ)ノ
♥  每個推薦&讚都是帶給麥菈菈持續分享的動力 

MaiLala 在 Facebook! 




~(♥ω♥ ) 更多文章在麥菈菈's Blogger (♥ω♥ ) ~♪
 




沒有留言:

張貼留言

歡迎推薦文章或分享、留言。