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.

- Để 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

Demo

- 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>