Font Awesome

Hướng dẫn chèn icon vào trang web bằng web font icon

Tìm hiểu Web Font Icon là gì?

Web Font Icon chính là bộ icon được thiết kế sẵn dưới dạng symbol font, nghĩa là font chữ ở dạng ký hiệu tương tư fonr wedding trong phần mềm soạn thảo văn bản Microsoft Word. Người dùng sẽ chèn vào trang web dưới dạng font chữ thông qua thuộc tính @font-face của CSS3. Tiện lợi của Web Font Icon chính là chỉ cần nhúng một lần và sử dụng mãi mãi vì đã có tất cả các icon trong đó.

Ưu điểm nổi trội của Web Font Icon chính là hiển thị vô cùng sắc nét nên dù bạn phóng to thu nhỏ thế nào thì cũng giữ được hình dạng như ban đầu. Người dùng có thể dễ dàng đặt nó ở bất kỳ đâu trên trang web cũng như thay đổi màu sắc một cách dễ dàng. Một trong những bộ Web Font Icon nổi tiếng đó chính là Font Awesome

Vậy thì Font Awesome có gì nổi bật?

Font Awesome
Font Awesome

Font Awesome là bộ icon với hơn 600 icon dùng để trang trí website được tạo và phát triển bởi Dave Gandy. Hầu hết các icon mà bạn muốn dùng để trang trí website đều có ở đây. Cách sử dụng khá đơn giản, các bạn có thể vào trang chủ của nó tại đây để tải về và tự cài đặt. 

Hướng dẫn cài đặt Font Awesome

Đầu tiên là nhúng tập tin css của Font Awesome vào trong website của bạn, lưu ý phải tải về bản mới nhất để cho nó tương thích với phiên bản wordpress.

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css” />

Sau đó bạn đăng nhập vào trang web http://fontawesome.io/icons/ và lựa chọn icon để sử dụng, để ý tên của icon đó, ví dụ với icon có tên là anchor chẳng hạn, để hiển thị ta sẽ viết như sau:

<i class=”fa fa-anchor”></i>

Để thay đổi màu sắc cho icon trong bộ Font Awesome

Mặc định của font awesome thì nó có màu đen. Để thay đổi màu sắc cho nó, các bạn có thể sử dụng CSS. Việc này cũng khá đơn giản, bạn có thể làm theo cú pháp sau:

<i class=”fa fa-anchor” style=”color: #2980b9;”></i>

 

Leave a Reply

Your email address will not be published. Required fields are marked *