Labels

[Blogger] Hướng dẫn sử dụng ionicons trang trí cho blogspot


Những icon biểu tượng nhỏ sẽ là rất cần thiết cho trang web của bạn. Ở các bài viết trước, tôi đã giới thiệu tới fontawesome, kho icon cực lớn cho webmaster. Tuy nhiên nhu cầu là không giới hạn, ở bài viết này tôi sẽ giới thiệu 1 kho icon nữa đó là ionicons.

Ionicons không nhiều icon bằng fontawesome tuy nhiên nó có những cái mà fontawesome không có, bạn có thể cân nhắc lựa chọn những icon ưng ý nhất để nó xuất hiện trên blog của mình.

Để có thể sử dụng được ionicons, bạn cần nhúng đoạn code sau và đặt nó nằm trong cặp thẻ <head>... </head>

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css"/>

Hoặc nếu chuyên nghiệp hơn bạn có thể import project của họ về github của mình để đồng nhất về 1 mối. Truy cập project tại địa chỉ https://github.com/driftyco/ionicons

Sau khi nhúng đoạn code trên thì hiện tại blog của bạn đã có thể sử dụng được ionicons rồi. Cách làm hoàn toàn giống như fontawesome. Với mã HTML
<i class="name"></i>
Thay name bằng cách truy cập cheatsheet. Ví dụ
<i class="ion-social-sass"></i>
Với code trong css thì hoàn toàn tương tự như fontawesome. Ví dụ
ID:before{content: "\f13a";font-family: "ionicons"}
Bạn có thể xem live demo sau

See the Pen ionicons by Hoàng Văn Hưng (@hoanghung96cs) on CodePen.

Như vậy sau bài viết này chúng ta lại có thêm 1 kho icon nữa để trang trí cho trang web ngày càng lộng lẫy !

Chúc bạn thành công