- Để 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>
Icon: http://fortawesome.github.io/Font-Awesome/icons/
Cách sử dụng: http://fortawesome.github.io/Font-Awesome/examples/
Cách sử dụng: http://fortawesome.github.io/Font-Awesome/examples/
Ví dụ tạo box thông báo với CSS3 và 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 {- Sử dụng bằng cách:
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
}
<div class='ghi-chu'>. . Nội dung . .</div>
Post a Comment