Hầu hết các trang web hiện nay đều sử dụng font icon vì nó cho phép thiết lập các style(kiểu) như một văn bản thông thường, tốc độ tải trang nhanh hơn so với dùng hình ảnh vì kích thước của nó không quá lớn và được hỗ trợ trong hầu như tất cả các trình duyệt. Để thuận lợi trong việc thiết kế mình xin giới thiệu đến các bạn Web Font Icon. Đây là bộ Font Icon được sử dụng phổ biến hiện nay.
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 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>
Trên đây là thông tin cũng như hướng dẫn cách cài đặt và sử dụng Font Awesome giúp bạn có thể chèn icon vào trang web với web font icon theo ý muốn của bạn. Để biết thêm nhiều dữ liệu hoặc bạn muốn cải thiện kỹ năng cũng như chất lượng website của mình có thể tham khảo qua https://mona.guide là một trong những kho tàn dữ liệu kiến thức về lĩnh vực thiết kế website, lập trình app mobile, SEO cho web,… và nhiều kiến thức từ cơ bản đến nâng cao được các lập trình viện chuyên nghiệp trong lĩnh vực chia sẽ cũng như giúp đỡ.
