Hướng dẫn sử dụng Font Awesome để làm đẹp cho website

How to use Font Awesome

Ngày nay khi truy cập vào nhiều website các bạn sẽ thấy các icon, tưởng chừng chúng là các hình ảnh nhưng thật ra chúng là Font Awesome. Vậy Font Awesome là gì? Font Awesome là một thư viện với vô số các icon mà bạn có thể lựa chọn để thêm vào website của mình, hiểu nôm na chúng là những biểu tượng được tạo ra bằng chữ chứ không phải bằng hình ảnh, đặc biệt chúng không làm ảnh hưởng đến tốc độ tải trang của website của bạn. Bạn có thể thấy chúng ngay trên Iris Tips đấy - toàn Font Awesome :))

1. Thêm thư viện Font Awesome vào website của bạn

Để thêm Font Awesome bạn cần thêm dòng script dưới đây vào trước thẻ </head>

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>

p/s: Ở đây mình chèn vào bằng dòng script trên chứ không phải là link CSS. Do khi chèn trực tiếp bằng link CSS khi kiểm tra Google PageSpeed Insights bạn sẽ bị lỗi Chặn hiển thị màn hình, đồng thời chèn bằng dòng script trên cũng giúp cho CSS load nhanh hơn.

2. Cú pháp sử dụng

<i class="fa fa-camera-retro"></i>

Kết quả:

3. Tùy biến nâng cao dành cho Font Awesome

3a. Tăng kích thước

Font Awesome cho phép chúng ta tùy biến kích thước các icon với mức độ thu phóng như sau:
- fa-lg : Tăng 33% kích thước
- fa-2x : Kích thước nhân 2
- fa-3x : Kích thước nhân 3
- fa-4x : Kích thước nhân 4
- fa-5x : Kích thước nhân 5

<i class="fa fa-camera-retro fa-lg"></i>
<i class="fa fa-camera-retro fa-2x"></i>
<i class="fa fa-camera-retro fa-3x"></i>
<i class="fa fa-camera-retro fa-4x"></i>
<i class="fa fa-camera-retro fa-5x"></i>

Kết quả: fa-lg, fa-2x, fa-3x, fa-4x, fa-5x

3b. Cố định độ rộng

Sử dụng fa-fw để đặt biểu tượng ở một độ rộng cố định. Đặc biệt hữu ích trong khi sử dụng nav lists và list groups.

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>

Kết quả:

  Home   Library   Applications   Settings

3c. Danh sách

Sử dụng fa-ul và fa-li để trình bày văn bản dạng danh sách.

<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>

Kết quả:

• List icons
• can be used
• as bullets
• in lists

3d. Dropcap cho bài viết

Sử dụng fa-border và pull-right hoặc pull-left để trình bày Font Awesome như một ký tự Dropcap trong văn bản.

<i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.

Kết quả:
...tomorrow we will run faster, stretch out our arms farther... And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past....tomorrow we will run faster, stretch out our arms farther... And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.

3e. Font Awesome động

Sử dụng fa-spin và fa-pulse để làm icon xoay vòng. Thích hợp cho các icon fa-spinner, fa-refresh và fa-cog.

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>

Kết quả:

3f. Xoay và lật ngược

Để xoay và lật ngược chúng ta sử dụng fa-rotate-* và fa-flip-*

<i class="fa fa-shield"></i> bình thường<br>
<i class="fa fa-shield fa-rotate-90"></i> xoay 90 độ
<i class="fa fa-shield fa-rotate-180"></i> xoay 180 độ
<i class="fa fa-shield fa-rotate-270"></i> xoay 270 độ
<i class="fa fa-shield fa-flip-horizontal"></i> lật ngang
<i class="fa fa-shield fa-flip-vertical"></i> lật dọc

Kết quả:
bình thường
xoay 90 độ
xoay 180 độ
xoay 270 độ
lật ngang
lật dọc

3g. Xếp chồng các biểu tượng lên nhau

Bạn có thể "chế biến" thêm Font Awesome bằng cách cho các biểu tượng xếp chồng lên nhau. Sử dụng fa-stack cho class cha. fa-stack-2x cho icon lớn bao phủ bên ngoài, fa-stack-1x cho icon nhỏ bên trong, fa-inverse để đảo màu.

<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 lồng vào trong 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 lồng vào trong 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 lồng vào trong 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 lồng vào trong fa-camera

Kết quả:
fa-twitter lồng vào trong fa-square-o
fa-flag lồng vào trong fa-circle
fa-terminal lồng vào trong fa-square
fa-ban lồng vào trong fa-camera

4. Danh sách icon Font Awesome

Bạn có thể tham khao danh sách các icon Tại đây, cũng như tra cứu các mã code của chúng.

• Danh sách icon Font Awesome

Hy vọng bài viết này sẽ giúp ích cho các bạn trong việc sử dụng Font Awesome để tùy biến cho website của mình

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm