CÓ GÌ MỚI ?
Loading...
Cuộc Đời Như Chốt Sang Sông - Tiến Ngang Tiến Dọc Nhưng Chẳn Được Lùi

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-lgfa-2xfa-3xfa-4xfa-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>

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ó
01.ghi-chu, .thong-tin, .canh-bao, .huong-dan, .cap-nhat {
02    displayblock;
03    font-stylenormal;
04    color#333;
05    padding15px 18px 15px 48px;
06    border-bottom1px solid rgba(0000.1);
07    positionrelative;
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    displayblock;
15    positionabsolute;
16    top15px;
17    left16px;
18    color: rgba(0000.15);
19    font-size22px;
20    line-height1;
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