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.
- Để 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ụ:
1 | <i class="fa fa-camera-retro fa-lg"></i> |
2 | <i class="fa fa-camera-retro fa-2x"></i> |
3 | <i class="fa fa-camera-retro fa-3x"></i> |
4 | <i class="fa fa-camera-retro fa-4x"></i> |
5 | <i class="fa fa-camera-retro fa-5x"></i> |
Danh sách Icon: http://fortawesome.github.io/Font-Awesome/icons/
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ó01 | .ghi-chu, .thong-tin, .canh-bao, .huong-dan, .cap-nhat { |
02 | display: block; |
03 | font-style: normal; |
04 | color: #333; |
05 | padding: 15px 18px 15px 48px; |
06 | border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
07 | position: relative; |
08 | border-radius:3px; |
09 | margin:0 0 10px; |
10 | color:#FFF |
11 | } |
12 | .ghi-chu:before, .thong-tin:before, .canh-bao:before, .huong-dan:before, .cap-nhat:before { |
13 | font-family:"FontAwesome"; |
14 | display: block; |
15 | position: absolute; |
16 | top: 15px; |
17 | left: 16px; |
18 | color: rgba(0, 0, 0, 0.15); |
19 | font-size: 22px; |
20 | line-height: 1; |
21 | } |
22 | .ghi-chu:before { |
23 | content:'\f11d' |
24 | } |
25 | .thong-tin:before { |
26 | content:'\f05a' |
27 | } |
28 | .canh-bao:before { |
29 | content:'\f071' |
30 | } |
31 | .huong-dan:before { |
32 | content:'\f028' |
33 | } |
34 | .cap-nhat:before { |
35 | content:'\f085' |
36 | } |
37 | .ghi-chu { |
38 | background-color:#49A5D7 |
39 | } |
40 | .thong-tin { |
41 | background-color:#FF9531 |
42 | } |
43 | .canh-bao { |
44 | background-color:#B25A5A |
45 | } |
46 | .huong-dan { |
47 | background-color:#FAD163; |
48 | color: #000; |
49 | } |
50 | .cap-nhat { |
51 | background-color:#69A24A |
52 | } |
- Sử dụng bằng cách:
1 | <div class='ghi-chu'>. . Nội dung . .</div> |
0 nhận xét:
Đăng nhận xét