Hướng dẫn sử dụng Font Awesome cho Blogspot (blogger)

Font Awesome mình chỉ nói tóm lại 1 câu là một thiết kế tuyệt vời cho các Blog/Website. Hầu như các webmaster đều sử dụng các biểu tượng này để tăng tính thẩm mỹ của blog/website của họ và gây hứng thú cho người dùng, những biểu tượng này ngày càng được được sử dụng phổ biến hơn.

Một hỏi mà mình thường hay gặp nhất: Tại sao không sử dụng hình ảnh để thay thế các biểu tưởng Font Awesome ?

Đây là câu trả lời Awesome. Các biểu tượng này tải với tốc độ nhanh gấp 10 lần so với các ảnh PNG hoặc các tập tin hình ảnh khác giảm tối thiểu số lượng yêu cầu HTTP tải hình ảnh trên blog của bạn. Nó giống như một đoạn văn bản trong blog/Website của blog, Ngoài ra nó có độ phân giải cao từ đó đêm lại một cái mình tuyệt vời cho blog/website của bạn.

Hướng dẫn cách cài đặt biểu tượng này trên Blog của bạn và cách tùy biến biểu tượng này bằng CSS.

Bạn vào Blog => Mẫu => Chỉnh sữa HTML. Nhấn tổ hợp Ctrl + F và tìm đoạn <head> Sau đó thêm đoạn code dưới đây phía dưới thẻ <head>

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Đây là một đoạn CSS nó sẽ làm giảm tốc độ load của blog của bạn, đây là cách khắc phục:

● Loại bỏ JavaScript và CSS chặn hiển thị của blogspot (blogger)

Mình thường gắn các biểu tượng này vào các liên kết chuyển được đặt biệt là các các thanh menu: Thường nằm trong 1 thể mở  và 1 thể đóng . Dưới đây là 2 Ví dụ: Biểu tượng cho trang chủ và biểu tượng liên hệ.

<li><a href='http://www.xemgi.tk'><i class='fa fa-home'></i>Home</a></li>
<li><a href='http://www.xemgi.tk/p/contact-us.html'><i class='fa fa-envelope-o'></i>Contact Us</a></li>

Để thay đổi/ sử dụng bạn chỉ cần thay thế tên biểu tưởng ở phần màu vàng  Các biểu tượng này được cập nhật đầy đủ TẠI ĐÂY:

Tùy biến các biểu tượng với CSS

Để tùy chỉnh màu sắc, kích thước hay tạo bóng cho các biểu tượng, chỉ cần gọi lệnh  trong CSS.

Bạn vào Blog => Mẫu => Chỉnh sữa HTML. Nhấn tổ hợp Ctrl + F và tìm đoạn ]]></b:skin> Sau đó thêm đoạn code dưới đây phía trên thẻ ]]></b:skin>

i {
    color:#E2FD18;
    font-size:15px;
    padding-right:5px;
    text-shadow: 1px 1px 1px #000;
}

>>>> Với cách này bạn sẽ chỉnh sữa hết các biểu tượng cùng một lúc

Còn bạn chỉ muốn làm hiệu ứng cho một biểu tượng cụ thể thì sử dụng lệnh này. Dưới đây là Ví dụ:

<i class='fa fa-heart' style='font-size:18px; color:red;'/>

>>>> Sau khi bạn áp dụng thì: Kích thước biểu tượng của bạn là 18px và màu biểu tượng của ban là màu đỏ.

Font Awesome theo m thì vô cùng thú vị và hữu ích, nó là một công cụ cần thiết cho các coder sự tiện dụng dễ dàng chỉnh sửa mà lại thay thế cho rất nhiều icon bằng hình ảnh. Bài viết này được Star Tuấn blog chỉnh sửa và rút gọn từ nguồn chính nếu bạn muốn tìm hiểu kỹ hơn thì có thể xem thêm tại: http://fortawesome.github.io/Font-Awesome, bạn có thể xem thêm ở trang này. Bây giờ các bạn cùng mình bắt tay vào thực hiện nhé.

Trước tiên là cài đặt font cho Blogspot

Việc đầu tiên các bạn hãy đặt đoạn code sau dưới thẻ </head> :
<link rel ="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
Nếu bạn không muốn có sự cố gì hãy tải lại file css về và up lên host của chính bạn cho dễ quản lý nhé.

Cách sử dụng font Awesome

Để sử dụng font Awesome thì việc đầu tiên là bạn phải năm đc tên icon mà mình muốn thêm vào. Để biết được điều này bạn có thể vào ĐÂY để tham khảo hoặc tìm kiếm ngay trong bài viết này.

Muốn đặt icon ở đâu thì bạn chèn đoạn code sau ở đó. Ví dụ bạn muốn hiển thị icon "download" thì bạn sử dụng đoạn code sau


<i class="fa fa-download"></i>

Bạn sẽ được kết như hình phía trước code

Tiếp theo là phần biến hóa của font Awesome

1. Thay đổi kích thước icon

Ngoài ra các bạn cũng có thể tuỳ biến kích thước bằng các đặt các ký hiệu sau đằng sau tên của icon fa-lg (tăng 33% kích thước), fa-2x (tăng kích thước gấp 2 lần), fa-3x (tăng kích thước gấp 3 lần), fa-4x (tăng kích thước gấp 4 lần), hay fa-5x (tăng kích thước gấp 5 lần). Ví dụ bạn dùng đoạn code sau:

<i class="fa fa-download fa-lg"></i> fa-lg


<i class="fa fa-download fa-2x"></i> fa-2x


<i class="fa fa-download fa-3x"></i> fa-3x


<i class="fa fa-download fa-4x"></i> fa-4x


<i class="fa fa-download fa-5x"></i> fa-5x

Và kết quả chúng ta thu được:
fa-lg fa-2x fa-3x fa-4x fa-5x

2. Trình bày dạng danh sách

Các bạn có thể trình dưới dạng danh sách bằng cách:

List icons
can be used
as bullets
in lists

Bằng mã code sau:


<ul class="fa-ul">

  <li><i class="fa-li fa fa-check-square"></i>List icons</li>

  <li><i class="fa-li fa fa-check-square"></i>can be used</li>

  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>

  <li><i class="fa-li fa fa-square"></i>in lists</li>

</ul>

3. Sử dụng icon động

Icon động thú vị phải không các bạn? Icon động theo tuấn sẽ giúp blog thêm bắt mắt hơn tạo nét riêng cho blog của bạn sử dụng làm các nút loding hay một số mũi tên v.v... nhẹ nhàng và tiện lợi không lo die link như cách sử dụng hình ảnh. Vậy thì làm thế nào để tạo icon động đây, các bạn chỉ việc thêm fa-spin sau tên icon để có icon xoay hoặc fa-pules để có icon xoay trong 8 bước. Dưới đây là một số icon xoay thông dụng:

Để có icon như trên Star Tuấn Blog's sử dụng đoạn code sau:

<i class="fa fa-spinner fa-spin fa-3x"></i>

<i class="fa fa-circle-o-notch fa-spin fa-3x"></i>

<i class="fa fa-refresh fa-spin fa-3x"></i>

<i class="fa fa-cog fa-spin fa-3x"></i>

<i class="fa fa-spinner fa-pulse fa-3x"></i>

4. Xếp chồng các icon lên nhau

Xoay đã rất thú vị rồi nhưng Font Awesome còn có thể làm các icon xếp chồng lên nhau bạn tin không? Không tin thì xem bên dưới nhé:
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera
Sử dụng code:


<span class="fa-stack fa-lg">

  <i class="fa fa-square-o fa-stack-2x"></i>

  <i class="fa fa-twitter fa-stack-1x"></i>

</span>fa-twitter on fa-square-o<br />



<span class="fa-stack fa-lg">

  <i class="fa fa-circle fa-stack-2x"></i>

  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>

</span>fa-flag on fa-circle<br />



<span class="fa-stack fa-lg">

  <i class="fa fa-square fa-stack-2x"></i>

  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>

</span>fa-terminal on fa-square<br />



<span class="fa-stack fa-lg">

  <i class="fa fa-camera fa-stack-1x"></i>

  <i class="fa fa-ban fa-stack-2x text-danger"></i>

</span>fa-ban on fa-camera

5. Xoay icon

Các bạn cũng có thể xoay icon cố định ở những góc độ mình thích hãy tham khảo đoạn code bên dưới nhé:
normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
icon-flip-vertical
Bạn có thể tham khảo đoạn code sau


<i class="fa fa-shield"></i> normal<br>

<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>

<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>

<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>

<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>

<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical

Và cuối cùng là danh sách các icon dành cho bạn

Và đây là danh sách icon cho các bạn đỡ mất công tìm kiếm hiện tại có 479 icon. Star Tuấn Blog sẽ cập nhập thêm:

 fa-glass                "\f000"

 fa-music                "\f001"

 fa-search                "\f002"

 fa-envelope-o                "\f003"

 fa-heart                "\f004"

 fa-star                "\f005"

 fa-star-o                "\f006"

 fa-user                "\f007"

 fa-film                "\f008"

 fa-th-large                "\f009"

 fa-th                "\f00a"

 fa-th-list                "\f00b"

 fa-check                "\f00c"

 fa-times                "\f00d"

 fa-search-plus                "\f00e"

 fa-search-minus                "\f010"

 fa-power-off                "\f011"

 fa-signal                "\f012"

 fa-cog                "\f013"

 fa-trash-o                "\f014"

 fa-home                "\f015"

 fa-file-o                "\f016"

 fa-clock-o                "\f017"

 fa-road                "\f018"

 fa-download                "\f019"

 fa-arrow-circle-o-down                "\f01a"

 fa-arrow-circle-o-up                "\f01b"

 fa-inbox                "\f01c"

 fa-play-circle-o                "\f01d"

 fa-repeat                "\f01e"

 fa-refresh                "\f021"

 fa-list-alt                "\f022"

 fa-lock                "\f023"

 fa-flag                "\f024"

 fa-headphones                "\f025"

 fa-volume-off                "\f026"

 fa-volume-down                "\f027"

 fa-volume-up                "\f028"

 fa-qrcode                "\f029"

 fa-barcode                "\f02a"

 fa-tag                "\f02b"

 fa-tags                "\f02c"

 fa-book                "\f02d"

 fa-bookmark                "\f02e"

 fa-print                "\f02f"

 fa-camera                "\f030"

 fa-font                "\f031"

 fa-bold                "\f032"

 fa-italic                "\f033"

 fa-text-height                "\f034"

 fa-text-width                "\f035"

 fa-align-left                "\f036"

 fa-align-center                "\f037"

 fa-align-right                "\f038"

 fa-align-justify                "\f039"

 fa-list                "\f03a"

 fa-outdent                "\f03b"

 fa-indent                "\f03c"

 fa-video-camera                "\f03d"

 fa-picture-o                "\f03e"

 fa-pencil                "\f040"

 fa-map-marker                "\f041"

 fa-adjust                "\f042"

 fa-tint                "\f043"

 fa-pencil-square-o                "\f044"

 fa-share-square-o                "\f045"

 fa-check-square-o                "\f046"

 fa-arrows                "\f047"

 fa-step-backward                "\f048"

 fa-fast-backward                "\f049"

 fa-backward                "\f04a"

 fa-play                "\f04b"

 fa-pause                "\f04c"

 fa-stop                "\f04d"

 fa-forward                "\f04e"

 fa-fast-forward                "\f050"

 fa-step-forward                "\f051"

 fa-eject                "\f052"

 fa-chevron-left                "\f053"

 fa-chevron-right                "\f054"

 fa-plus-circle                "\f055"

 fa-minus-circle                "\f056"

 fa-times-circle                "\f057"

 fa-check-circle                "\f058"

 fa-question-circle                "\f059"

 fa-info-circle                "\f05a"

 fa-crosshairs                "\f05b"

 fa-times-circle-o                "\f05c"

 fa-check-circle-o                "\f05d"

 fa-ban                "\f05e"

 fa-arrow-left                "\f060"

 fa-arrow-right                "\f061"

 fa-arrow-up                "\f062"

 fa-arrow-down                "\f063"

 fa-share                "\f064"

 fa-expand                "\f065"

 fa-compress                "\f066"

 fa-plus                "\f067"

 fa-minus                "\f068"

 fa-asterisk                "\f069"

 fa-exclamation-circle                "\f06a"

 fa-gift                "\f06b"

 fa-leaf                "\f06c"

 fa-fire                "\f06d"

 fa-eye                "\f06e"

 fa-eye-slash                "\f070"

 fa-exclamation-triangle                "\f071"

 fa-plane                "\f072"

 fa-calendar                "\f073"

 fa-random                "\f074"

 fa-comment                "\f075"

 fa-magnet                "\f076"

 fa-chevron-up                "\f077"

 fa-chevron-down                "\f078"

 fa-retweet                "\f079"

 fa-shopping-cart                "\f07a"

 fa-folder                "\f07b"

 fa-folder-open                "\f07c"

 fa-arrows-v                "\f07d"

 fa-arrows-h                "\f07e"

 fa-bar-chart                "\f080"

 fa-twitter-square                "\f081"

 fa-facebook-square                "\f082"

 fa-camera-retro                "\f083"

 fa-key                "\f084"

 fa-cogs                "\f085"

 fa-comments                "\f086"

 fa-thumbs-o-up                "\f087"

 fa-thumbs-o-down                "\f088"

 fa-star-half                "\f089"

 fa-heart-o                "\f08a"

 fa-sign-out                "\f08b"

 fa-linkedin-square                "\f08c"

 fa-thumb-tack                "\f08d"

 fa-external-link                "\f08e"

 fa-sign-in                "\f090"

 fa-trophy                "\f091"

 fa-github-square                "\f092"

 fa-upload                "\f093"

 fa-lemon-o                "\f094"

 fa-phone                "\f095"

 fa-square-o                "\f096"

 fa-bookmark-o                "\f097"

 fa-phone-square                "\f098"

 fa-twitter                "\f099"

 fa-facebook                "\f09a"

 fa-github                "\f09b"

 fa-unlock                "\f09c"

 fa-credit-card                "\f09d"

 fa-rss                "\f09e"

 fa-hdd-o                "\f0a0"

 fa-bullhorn                "\f0a1"

 fa-bell                "\f0f3"

 fa-certificate                "\f0a3"

 fa-hand-o-right                "\f0a4"

 fa-hand-o-left                "\f0a5"

 fa-hand-o-up                "\f0a6"

 fa-hand-o-down                "\f0a7"

 fa-arrow-circle-left                "\f0a8"

 fa-arrow-circle-right                "\f0a9"

 fa-arrow-circle-up                "\f0aa"

 fa-arrow-circle-down                "\f0ab"

 fa-globe                "\f0ac"

 fa-wrench                "\f0ad"

 fa-tasks                "\f0ae"

 fa-filter                "\f0b0"

 fa-briefcase                "\f0b1"

 fa-arrows-alt                "\f0b2"

 fa-users                "\f0c0"

 fa-link                "\f0c1"

 fa-cloud                "\f0c2"

 fa-flask                "\f0c3"

 fa-scissors                "\f0c4"

 fa-files-o                "\f0c5"

 fa-paperclip                "\f0c6"

 fa-floppy-o                "\f0c7"

 fa-square                "\f0c8"

 fa-bars                "\f0c9"

 fa-list-ul                "\f0ca"

 fa-list-ol                "\f0cb"

 fa-strikethrough                "\f0cc"

 fa-underline                "\f0cd"

 fa-table                "\f0ce"

 fa-magic                "\f0d0"

 fa-truck                "\f0d1"

 fa-pinterest                "\f0d2"

 fa-pinterest-square                "\f0d3"

 fa-google-plus-square                "\f0d4"

 fa-google-plus                "\f0d5"

 fa-money                "\f0d6"

 fa-caret-down                "\f0d7"

 fa-caret-up                "\f0d8"

 fa-caret-left                "\f0d9"

 fa-caret-right                "\f0da"

 fa-columns                "\f0db"

 fa-sort                "\f0dc"

 fa-sort-desc                "\f0dd"

 fa-sort-asc                "\f0de"

 fa-envelope                "\f0e0"

 fa-linkedin                "\f0e1"

 fa-undo                "\f0e2"

 fa-gavel                "\f0e3"

 fa-tachometer                "\f0e4"

 fa-comment-o                "\f0e5"

 fa-comments-o                "\f0e6"

 fa-bolt                "\f0e7"

 fa-sitemap                "\f0e8"

 fa-umbrella                "\f0e9"

 fa-clipboard                "\f0ea"

 fa-lightbulb-o                "\f0eb"

 fa-exchange                "\f0ec"

 fa-cloud-download                "\f0ed"

 fa-cloud-upload                "\f0ee"

 fa-user-md                "\f0f0"

 fa-stethoscope                "\f0f1"

 fa-suitcase                "\f0f2"

 fa-bell-o                "\f0a2"

 fa-coffee                "\f0f4"

 fa-cutlery                "\f0f5"

 fa-file-text-o                "\f0f6"

 fa-building-o                "\f0f7"

 fa-hospital-o                "\f0f8"

 fa-ambulance                "\f0f9"

 fa-medkit                "\f0fa"

 fa-fighter-jet                "\f0fb"

 fa-beer                "\f0fc"

 fa-h-square                "\f0fd"

 fa-plus-square                "\f0fe"

 fa-angle-double-left                "\f100"

 fa-angle-double-right                "\f101"

 fa-angle-double-up                "\f102"

 fa-angle-double-down                "\f103"

 fa-angle-left                "\f104"

 fa-angle-right                "\f105"

 fa-angle-up                "\f106"

 fa-angle-down                "\f107"

 fa-desktop                "\f108"

 fa-laptop                "\f109"

 fa-tablet                "\f10a"

 fa-mobile                "\f10b"

 fa-circle-o                "\f10c"

 fa-quote-left                "\f10d"

 fa-quote-right                "\f10e"

 fa-spinner                "\f110"

 fa-circle                "\f111"

 fa-reply                "\f112"

 fa-github-alt                "\f113"

 fa-folder-o                "\f114"

 fa-folder-open-o                "\f115"

 fa-smile-o                "\f118"

 fa-frown-o                "\f119"

 fa-meh-o                "\f11a"

 fa-gamepad                "\f11b"

 fa-keyboard-o                "\f11c"

 fa-flag-o                "\f11d"

 fa-flag-checkered                "\f11e"

 fa-terminal                "\f120"

 fa-code                "\f121"

 fa-reply-all                "\f122"

 fa-star-half-o                "\f123"

 fa-location-arrow                "\f124"

 fa-crop                "\f125"

 fa-code-fork                "\f126"

 fa-chain-broken                "\f127"

 fa-question                "\f128"

 fa-info                "\f129"

 fa-exclamation                "\f12a"

 fa-superscript                "\f12b"

 fa-subscript                "\f12c"

 fa-eraser                "\f12d"

 fa-puzzle-piece                "\f12e"

 fa-microphone                "\f130"

 fa-microphone-slash                "\f131"

 fa-shield                "\f132"

 fa-calendar-o                "\f133"

 fa-fire-extinguisher                "\f134"

 fa-rocket                "\f135"

 fa-maxcdn                "\f136"

 fa-chevron-circle-left                "\f137"

 fa-chevron-circle-right                "\f138"

 fa-chevron-circle-up                "\f139"

 fa-chevron-circle-down                "\f13a"

 fa-html5                "\f13b"

 fa-css3                "\f13c"

 fa-anchor                "\f13d"

 fa-unlock-alt                "\f13e"

 fa-bullseye                "\f140"

 fa-ellipsis-h                "\f141"

 fa-ellipsis-v                "\f142"

 fa-rss-square                "\f143"

 fa-play-circle                "\f144"

 fa-ticket                "\f145"

 fa-minus-square                "\f146"

 fa-minus-square-o                "\f147"

 fa-level-up                "\f148"

 fa-level-down                "\f149"

 fa-check-square                "\f14a"

 fa-pencil-square                "\f14b"

 fa-external-link-square                "\f14c"

 fa-share-square                "\f14d"

 fa-compass                "\f14e"

 fa-caret-square-o-down                "\f150"

 fa-caret-square-o-up                "\f151"

 fa-caret-square-o-right                "\f152"

 fa-eur                "\f153"

 fa-gbp                "\f154"

 fa-usd                "\f155"

 fa-inr                "\f156"

 fa-jpy                "\f157"

 fa-rub                "\f158"

 fa-krw                "\f159"

 fa-btc                "\f15a"

 fa-file                "\f15b"

 fa-file-text                "\f15c"

 fa-sort-alpha-asc                "\f15d"

 fa-sort-alpha-desc                "\f15e"

 fa-sort-amount-asc                "\f160"

 fa-sort-amount-desc                "\f161"

 fa-sort-numeric-asc                "\f162"

 fa-sort-numeric-desc                "\f163"

 fa-thumbs-up                "\f164"

 fa-thumbs-down                "\f165"

 fa-youtube-square                "\f166"

 fa-youtube                "\f167"

 fa-xing                "\f168"

 fa-xing-square                "\f169"

 fa-youtube-play                "\f16a"

 fa-dropbox                "\f16b"

 fa-stack-overflow                "\f16c"

 fa-instagram                "\f16d"

 fa-flickr                "\f16e"

 fa-adn                "\f170"

 fa-bitbucket                "\f171"

 fa-bitbucket-square                "\f172"

 fa-tumblr                "\f173"

 fa-tumblr-square                "\f174"

 fa-long-arrow-down                "\f175"

 fa-long-arrow-up                "\f176"

 fa-long-arrow-left                "\f177"

 fa-long-arrow-right                "\f178"

 fa-apple                "\f179"

 fa-windows                "\f17a"

 fa-android                "\f17b"

 fa-linux                "\f17c"

 fa-dribbble                "\f17d"

 fa-skype                "\f17e"

 fa-foursquare                "\f180"

 fa-trello                "\f181"

 fa-female                "\f182"

 fa-male                "\f183"

 fa-gittip                "\f184"

 fa-sun-o                "\f185"

 fa-moon-o                "\f186"

 fa-archive                "\f187"

 fa-bug                "\f188"

 fa-vk                "\f189"

 fa-weibo                "\f18a"

 fa-renren                "\f18b"

 fa-pagelines                "\f18c"

 fa-stack-exchange                "\f18d"

 fa-arrow-circle-o-right                "\f18e"

 fa-arrow-circle-o-left                "\f190"

 fa-caret-square-o-left                "\f191"

 fa-dot-circle-o                "\f192"

 fa-wheelchair                "\f193"

 fa-vimeo-square                "\f194"

 fa-try                "\f195"

 fa-plus-square-o                "\f196"

 fa-space-shuttle                "\f197"

 fa-slack                "\f198"

 fa-envelope-square                "\f199"

 fa-wordpress                "\f19a"

 fa-openid                "\f19b"

 fa-university                "\f19c"

 fa-graduation-cap                "\f19d"

 fa-yahoo                "\f19e"

 fa-google                "\f1a0"

 fa-reddit                "\f1a1"

 fa-reddit-square                "\f1a2"

 fa-stumbleupon-circle                "\f1a3"

 fa-stumbleupon                "\f1a4"

 fa-delicious                "\f1a5"

 fa-digg                "\f1a6"

 fa-pied-piper                "\f1a7"

 fa-pied-piper-alt                "\f1a8"

 fa-drupal                "\f1a9"

 fa-joomla                "\f1aa"

 fa-language                "\f1ab"

 fa-fax                "\f1ac"

 fa-building                "\f1ad"

 fa-child                "\f1ae"

 fa-paw                "\f1b0"

 fa-spoon                "\f1b1"

 fa-cube                "\f1b2"

 fa-cubes                "\f1b3"

 fa-behance                "\f1b4"

 fa-behance-square                "\f1b5"

 fa-steam                "\f1b6"

 fa-steam-square                "\f1b7"

 fa-recycle                "\f1b8"

 fa-car                "\f1b9"

 fa-taxi                "\f1ba"

 fa-tree                "\f1bb"

 fa-spotify                "\f1bc"

 fa-deviantart                "\f1bd"

 fa-soundcloud                "\f1be"

 fa-database                "\f1c0"

 fa-file-pdf-o                "\f1c1"

 fa-file-word-o                "\f1c2"

 fa-file-excel-o                "\f1c3"

 fa-file-powerpoint-o                "\f1c4"

 fa-file-image-o                "\f1c5"

 fa-file-archive-o                "\f1c6"

 fa-file-audio-o                "\f1c7"

 fa-file-video-o                "\f1c8"

 fa-file-code-o                "\f1c9"

 fa-vine                "\f1ca"

 fa-codepen                "\f1cb"

 fa-jsfiddle                "\f1cc"

 fa-life-ring                "\f1cd"

 fa-circle-o-notch                "\f1ce"

 fa-rebel                "\f1d0"

 fa-empire                "\f1d1"

 fa-git-square                "\f1d2"

 fa-git                "\f1d3"

 fa-hacker-news                "\f1d4"

 fa-tencent-weibo                "\f1d5"

 fa-qq                "\f1d6"

 fa-weixin                "\f1d7"

 fa-paper-plane                "\f1d8"

 fa-paper-plane-o                "\f1d9"

 fa-history                "\f1da"

 fa-circle-thin                "\f1db"

 fa-header                "\f1dc"

 fa-paragraph                "\f1dd"

 fa-sliders                "\f1de"

 fa-share-alt                "\f1e0"

 fa-share-alt-square                "\f1e1"

 fa-bomb                "\f1e2"

 fa-futbol-o                "\f1e3"

 fa-tty                "\f1e4"

 fa-binoculars                "\f1e5"

 fa-plug                "\f1e6"

 fa-slideshare                "\f1e7"

 fa-twitch                "\f1e8"

 fa-yelp                "\f1e9"

 fa-newspaper-o                "\f1ea"

 fa-wifi                "\f1eb"

 fa-calculator                "\f1ec"

 fa-paypal                "\f1ed"

 fa-google-wallet                "\f1ee"

 fa-cc-visa                "\f1f0"

 fa-cc-mastercard                "\f1f1"

 fa-cc-discover                "\f1f2"

 fa-cc-amex                "\f1f3"

 fa-cc-paypal                "\f1f4"

 fa-cc-stripe                "\f1f5"

 fa-bell-slash                "\f1f6"

 fa-bell-slash-o                "\f1f7"

 fa-trash                "\f1f8"

 fa-copyright                "\f1f9"

 fa-at                "\f1fa"

 fa-eyedropper                "\f1fb"

 fa-paint-brush                "\f1fc"

 fa-birthday-cake                "\f1fd"

 fa-area-chart                "\f1fe"

 fa-pie-chart                "\f200"

 fa-line-chart                "\f201"

 fa-lastfm                "\f202"

 fa-lastfm-square                "\f203"

 fa-toggle-off                "\f204"

 fa-toggle-on                "\f205"

 fa-bicycle                "\f206"

 fa-bus                "\f207"

 fa-ioxhost                "\f208"

 fa-angellist                "\f209"

 fa-cc                "\f20a"

 fa-ils                "\f20b"

 fa-meanpath                "\f20c"

Kết luận

- Chỉ với một thủ thuật nho nhỏ đã làm Blog/Website của bạn trở nên sinh động hơn rất nhiều. Chúc các ban thành công!

Bình luận Blogger

MỘT SỐ LƯU Ý KHI BÌNH LUẬN:
● Comment có văn hóa: Không chửi tục, nói bậy, thông qua khung Comment.
● Với tên "ẩn danh" thì bạn tích vào ô: "chứng minh bạn không phải là rô-bốt".
● Để bình luận một đoạn code, bạn click vào đây để mã hóa code trước nhé !
● Để đăng ảnh làm hình minh họa, bạn click vào đây để Upload ảnh lên sever nhé !