Font Awesome Icons(FAI) là bộ font chữ mang phong cách các biểu tượng thường nhật hàng ngày mà bạn hay gặp trên các website.Nhưng với hình dáng và màu sắc ko cầu kì, phức tạp, FAI mang đậm khuynh hướng đơn giản nhưng nổi bật, chắc chắn sẽ làm cho website của bạn trở nên lạ lẫm nhưng không kém phần cá tính. (y)
Để tích hợp vào website, bạn phải thực hiện các bước sau.
Tích hợp online :
1.Bạn chỉ cần chèn đoạn code sau vào trước giữa cặp thẻ <head> và </head>.<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">save lại và thư viện FAI đã được tích hợp vào web của bạn. Việc còn lại là bạn chỉ cần gọi các class ra và sử dụng theo mục đích của bạn- Chèn các biểu tượng bằng cặp thẻ <i class="fa fa-[tên icon]"></i>
Tích hợp offline:
1. Download bộ nguồn tại đây : http://adf.ly/slM8m
2.Giải nén ra và chép vào thư mục website của bạn, việc cuối cùng là bạn chỉ việc chèn file font-awesome.min.css .
Sau đây là 1 vài ví dụ để bạn dễ hình dung :
Để khởi tạo 1 icon bạn phải bắt đầu bằng tag <i class="fa fa-[tên icon]"></i>
Ví dụ :
<i class="fa fa-camera-retro"></i> fa-camera-retro
Kích thước icon:
Để tăng kích thước các icon bạn dùng
fa-lg (tăng lên 33%), fa-2x, fa-3x, fa-4x, hoặc class fa-5x 
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
Sử dụng
fa-fw để tạo những icon có độ rộng cố định. Rất hữa ích khi sử dụng làm những thanh nav hay menu, lists hay list groups..
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>
Dùng
fa-ul và fa-li để thay thế các dấu chấm mặc định của tag li ul :
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
Dùng
fa-border và pull-right hoặc pull-left để tạo 1 hình thay thế trong word-wrap:
<i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.
Dùng
fa-spin đễ có những icon động .Hoạt động tốt với class fa-spinner, fa-refresh, và fa-cog.<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
Không hỗ trợ IE8 - IE9.
Xoay , lật các icon , dùng
fa-rotate-* vàfa-flip-* .
<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical
Kết hợp nhiều icons, sử dụng
fa-stack ở div cha, fa-stack-1 ,cho kích thước chuẩn và fa-stack-2x cho kích thước lớn hơn. 
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera
<a class="btn btn-danger" href="#">
<i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#">
<i class="fa fa-cog"></i> Settings</a>
<a class="btn btn-lg btn-success" href="#">
<i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.2.0</a>
<div class="btn-group">
<a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input class="form-control" type="password" placeholder="Password">
</div>
<div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-caret-down"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>
nhin chung việc kết hợp xấu hay đẹp còn phụ thuộc vào code bạn viết như thế nào, sự sáng tạo của bạn kết hợp sẽ mang lại cá tính riêng cho web của bạn .
