Hướng dẫn cách sử dụng font awesome icons năm 2024

< `5 ``6<8 8 9 5>`

`3< 5 ``6<8<7 9 5>`

`3< 5 ``6<8`head`6 9 5>`

`3< 5 ``6<8>5 9 5>`

`3< 5 ``6<8 4 9 5>`

>`2 1>`

>`2>7>`

>`2`html >

Kết quả:

Bạn thấy rõ ràng mình không dùng một image nào mà vẫn có thể tạo được các icon động đẹp lộng lẫy thế đó

Font Awesome là là một thư viện chứa các font chữ ký hiệu hay sử dụng trong website. Font chữ ký hiệu ở đây chính là các icons mà ta thường hay sử dụng trong các layout website. Font Awesome được xây dựng thành nhiều định dạng file font khác nhau như file <`9, <00, <01, <02, <`03, … Vì vậy bạn dễ dàng đưa vào sử dụng và hầu hết các hệ điều hành máy tính hiện nay đều chạy được. Ngoài các icons thông thường ra thì bạn có thể tạo các icons động bằng cách kết hợp với CSS3 như trong ví dụ mình đã demo ở trên. Font Awesome hoạt động hầu hết ở các trình duyệt hiện đại hiện hay. Tuy nhiên với các phiên bản cũ IE7 thì nó không hỗ trợ nữa vì IE7 được coi như đã chết. Nếu bạn sử dụng Bootstrap để xây dựng CSS cho website thì sẽ dễ dàng nhận thấy sự cần thiết của Font Awesome bởi vì chúng kết hợp với nhau khá là tốt và tạo ra các sản phẩm khá là bắt mắt.

2. Điểm mạnh của Font Awesome

Nếu ta sử dụng hình ảnh thì tốc độ load của website sẽ chậm hơn bởi vì ta phải load môt hình ảnh khá là nặng nề. Nhưng với Font Awesome thì ban chỉ cần load một file CSS, một file Font và chỉ load một lần duy nhất nên tốc độ sẽ được cải thiện đáng kể. Một hình ảnh không thể thay đổi màu, kích thước của chúng được. Riêng với kích thước thì ta có thể sử dụng CSS để thiết lập chiều rộng, chiều cao, nhưng nếu làm như vậy thì chất lượng hình ảnh sẽ bị ảnh hưởng. Nhưng với Font Awesome thì bạn dễ dàng thay đổi kích thước và màu của icon bằng những thuộc tính CSS thông thường của font chữ như <`04, <`05 hay bất kì một thuộc tính CSS nào khác dành cho Font chữ. Font Awesome sử dụng linh hoạt giúp lập trình viên không mất quá nhiều thời gian để lấy các icons từ file PSD. Và còn nhiều điểm mạnh nữa nhưng mình dành cho bạn tự khám phá.

3. Cách sử dụng Font Awesome

Để bạn dễ hiểu thì mình sẽ thực hiện các bước như sau:

Bước 1: Download Font Awesome và nhúng vào Layout1

Để sử dụng được Font Awesome thì ban phải download thư viện của nó về hoặc sử dụng link CDN mà nó cung cấp cho chúng ta. Nếu bạn sử dụng link CDN thì chỉ việc nhúng đường dẫn CSS sau:

Nếu bạn download về thì sẽ được một folder gồm các file như trong hình sau:

Trong đó bạn chỉ quan tâm đến file <`06. Nghĩa là để sử dụng thì bạn chỉ việc sử dụng file CSS <`06.

1

< <`09 <10<8<12 <13<8<15<`16

Bước 2: Tham khảo các class tạo ICON có sẵn của Font Awesome2

Bạn vào link này để xem các icons và các class tạo nên chúng nhé.

Bước 3: Sử dụng Font Awesome3

Để tạo icon thì bạn nên sử dụng thẻ ``5 và bổ sung class của icon. Ví dụ: XEM DEMO

1

< `5 ``6<8<22 9 5>`

Kết quả:

4. Sử dụng Font Awesome nâng cao

Ngoài cách sử dụng căn bản trên thì Font Awesome cung cấp một số tính năng nâng cao khác.

Tạo icon lớn:

Để tăng kích thước của các icons thì bạn sử dụng các class <`26, class này sẽ tăng 33% so với kích thước mặc đinh ban đầu. Hoặc bạn có thể sử dụng các class <27, <28, <29, <`30 để tăng theo tỷ lệ tương ứng với tên class. Ví dụ: XEM DEMO

1

2

3

4

5

< `5 ``6<8<35 9 5<`38

< `5 ``6<8<43 9 5<`46

< `5 ``6<8<51 9 5<`54

< `5 ``6<8<59 9 5<`62

< `5 ``6<8<67 9 5<`70

Kết quả:

Thêm Border và Pulled cho icon:

Để thêm border thì ta thêm class <`71. Để thêm Pulled thì ta thêm class<72 hoặc <`73. Ví dụ:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

< `1>`

< <`79<80<79<82<83<`16

< `5 ``6<8<90 9 5>`

`<`95

`<`97

`<`99

>`2 1>`

< `1>`

< <`79`html`09<79<82<83<`16

< `5 ``6<8`html`19 9 5>`

`<`95

`<`97

`<`99

>`2 1>`

< `1>`

< <`79`html`38<79<82<83<`16

< `5 ``6<8`html`48 9 5>`

`<`95

`<`97

`<`99

>`2 1>`

Kết quả:

Animated Icons:

Sử dụng class`html`61 để thêm hiệu ứng xoay và sử dụng class `html`62 để chúng xoay trong 8 bước. Ngoài ra bạn còn có thể sử dụng các class `html`63, `html`64, và `html`65. Ví dụ: XEM DEMO

1

2

3

4

5

< `5 ``6<8`html`70 9 5>`

< `5 ``6<8`html`78 9 5>`

< `5 ``6<8`html`86 9 5>`

< `5 ``6<8`html`94 9 5>`

< `5 ``6<8>02 9 5>`

Kết quả:

Rotated & Flipped Icons:

Để xoay icon và đảo ngược vị trí của icon thì bạn sử dụng các class như trong ví dụ dưới đây: XEM DEMO

1

2

3

4

5

6

< `5 ``6<8>10 9 5>13<83>`

< `5 ``6<8>20 9 5>23<83>`

< `5 ``6<8>30 9 5>33<83>`

< `5 ``6<8>40 9 5>43<83>`

< `5 ``6<8>50 9 5>53<83>`

< `5 ``6<8>60 9 5>`63

Kết quả:

Stacked Icons:

Stacked Icons tức là bạn tạo một icon từ nhiều icons. Để làm được điều này ban phải tạo một thẻ span ở ngoài và bên trong là danh sách các thẻ `5 icon. Thẻ ngoài cùng gọi là thẻ cha và nó phải có class>`65, còn thẻ i bên trong là một icon bình thường như ở trên. Ví dụ:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

< `1>`

< >`71 ``6<8>74>`

< `5 ``6<8>81 9 5>`

< `5 ``6<8>90 9 5>`

>`2>71>`

>`99<83>`

< >`71 ``6<8>74>`

< `5 ``6<8 14 9 5>`

< `5 ``6<8 23 9 5>`

>`2>71>`

`32<83>`

< >`71 ``6<8>74>`

< `5 ``6<8 47 9 5>`

< `5 ``6<8 56 9 5>`

>`2>71>`

`65<83>`

< >`71 ``6<8>74>`

< `5 ``6<8 80 9 5>`

< `5 ``6<8 89 9 5>`

>`2>71>`

` `98

>`2 1>`

Kết quả:

5. Thêm Icon với thuộc tính after và before

Nếu bạn để ý kỹ thì Font Awesome sẽ sử dụng hai thuộc tính after và before kết hợp với thuộc tính `html`7 để tạo nên các icons. Ví dụ với icon quote left thì CSS của nó là:

1

2

3

4

<`03<04<`05

<`07<08<09<`10

html`7<08<14<`10

`<`16

Như vậy ta sẽ sử dụng cú pháp này để thêm ICON vào class của riêng mình:

1

2

3

4

`<`17

<`07<08<09<`10

html`7<08<14<`10

`<`16

Bạn có thể sử dụng firebug để xem giá trị content của các icon.

6. Lời kết

Như vậy bài này mình đã tóm lược một cách tổng quát nhất về cách sử dụng Font Awesome từ căn bản đến nâng cao rồi đấy. Hy vọng qua bài này bạn sẽ hiểu khái niệm về Symboy Font và không thắc mắc Font Awesome là gì nữa nhé.