Chèn icon vào blog sử dụng Font Awesome
Phan Nhật Chánh - Official website

Chèn icon vào blog sử dụng Font Awesome

   Feb 28, 2015   
Báo lỗi bài viết×
Bài viết: Chèn icon vào blog sử dụng Font Awesome
Font Awesome là một kiểu font giúp bạn chèn các icon vào trong trang web của bạn một cách dể dàng, nhanh, gọn lẹ mà không cần phải mất thời gian để thiết kế icon, nó là một thành phần mở rộng trong Bootstrap Framework.
su dung font awesome cho blogspot, font awesome blogger, bootstrap font awesome
- Để sử dụng Font Awesome cho blogspot, chỉ cần chèn đoạn mã phía dưới trước thẻ </head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
- Chọn icon cần thiển thị (danh sách icon có rất nhiều icon cho bạn lựa chọn)
- Ví dụ để hiển thị icon: Icon camera-retro chỉ cần thêm <i class="fa fa-camera-retro"></i>
- Thay đổi kích thước icon thêm fa-lg, fa-2x, fa-3x, fa-4x, fa-5x Ví dụ:
<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>

Ví dụ tạo box thông báo với CSS3 và Font Awesome

CSS 3 Info Box với biểu tượng icon Font Awesome


- Vào Blogger >> Mẫu >> Chỉnh sửa HTML
- Tìm ]]></b:skin> hoặc </style> và đặt đoạn css dưới đây vào trước nó
.ghi-chu, .thong-tin, .canh-bao, .huong-dan, .cap-nhat {
display: block;
font-style: normal;
color: #333;
padding: 15px 18px 15px 48px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
position: relative;
border-radius:3px;
margin:0 0 10px;
color:#FFF
}
.ghi-chu:before, .thong-tin:before, .canh-bao:before, .huong-dan:before, .cap-nhat:before {
font-family:"FontAwesome";
display: block;
position: absolute;
top: 15px;
left: 16px;
color: rgba(0, 0, 0, 0.15);
font-size: 22px;
line-height: 1;
}
.ghi-chu:before {
content:'\f11d'
}
.thong-tin:before {
content:'\f05a'
}
.canh-bao:before {
content:'\f071'
}
.huong-dan:before {
content:'\f028'
}
.cap-nhat:before {
content:'\f085'
}
.ghi-chu {
background-color:#49A5D7
}
.thong-tin {
background-color:#FF9531
}
.canh-bao {
background-color:#B25A5A
}
.huong-dan {
background-color:#FAD163;
color: #000;
}
.cap-nhat {
background-color:#69A24A
}
- Sử dụng bằng cách:
<div class='ghi-chu'>. . Nội dung . .</div>

Post a Comment