Font Awesome Icons và cách sử dụng Duy Ripper

Hôm nay, mình xin giới thiệu với các bạn một thủ thuật blogspot khá hay. Thời gian này mình đang thay áo cho Blog Duy Ripper nên cũng tìm hiểu thêm một số thủ thuật để làm đẹp cho blog. Tình cờ mình đọc được bài viết về Font Awesome icons thấy khá là có ích nên chia sẻ cùng các bạn luôn mình hy vọng sẽ có ích cho các bạn.

Font Awesome Icons và cách sử dụng

Font Awesome theo mình 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 mình 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

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:

fa-lg
 fa-2x
 fa-3x
 fa-4x
 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>List icons</li>
<li>can be used</li>
<li>as bullets</li>
<li>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 mình 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 ta sử dụng đoạn code sau:

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:

fa-twitter on fa-square-o

fa-flag on fa-circle

fa-terminal on fa-square

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:

normal 
 fa-rotate-90 
 fa-rotate-180 
 fa-rotate-270 
 fa-flip-horizontal 
 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. Mình 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"

Chúc các ban thành công!