- Font Awesome là là một thư viện chứa các font chữ ký hiệu hay sử dụng trong website. Font chữ ký hiệu ở đây chính là các icons mà ta thường hay sử dụng trong các layout website.
- Font Awesome được xây dựng thành nhiều định dạng file font khác nhau như file otf, eot, ttf, woff, svg, ... Vì vậy bạn dễ dàng đưa vào sử dụng và hầu hết các hệ điều hành máy tính hiện nay đều chạy được.Ngoài các icons thông thường ra thì bạn có thể tạo các icons động bằng cách kết hợp với CSS3.
- Font Awesome hoạt động hầu hết ở các trình duyệt hiện đại hiện hay. Tuy nhiên với các phiên bản cũ IE7 thì nó không hỗ trợ nữa vì IE7 được coi như đã chết. Nếu bạn sử dụng Bootstrap để xây dựng CSS cho website thì sẽ dễ dàng nhận thấy sự cần thiết của Font Awesome bởi vì chúng kết hợp với nhau khá là tốt và tạo ra các sản phẩm khá là bắt mắt.
- Font Awesome được xây dựng thành nhiều định dạng file font khác nhau như file otf, eot, ttf, woff, svg, ... Vì vậy bạn dễ dàng đưa vào sử dụng và hầu hết các hệ điều hành máy tính hiện nay đều chạy được.Ngoài các icons thông thường ra thì bạn có thể tạo các icons động bằng cách kết hợp với CSS3.
- Font Awesome hoạt động hầu hết ở các trình duyệt hiện đại hiện hay. Tuy nhiên với các phiên bản cũ IE7 thì nó không hỗ trợ nữa vì IE7 được coi như đã chết. Nếu bạn sử dụng Bootstrap để xây dựng CSS cho website thì sẽ dễ dàng nhận thấy sự cần thiết của Font Awesome bởi vì chúng kết hợp với nhau khá là tốt và tạo ra các sản phẩm khá là bắt mắt.
Cách sử dụng Font Awesome.
Bước 1: Nhúng Font Awesome bằng đường Link hoặc tải về
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
Bước 2: Tìm các Class có sẵn của Font Awesome bên dưới.
Bước 3: Sử dụng Font Awesome.
Cách sử dụng:
Bạn có thể sử dụng <i>thẻ đơn giản để đặt biểu tượng trong trang của mình, như sau:
<i class="fa fa-home"></i> = Ngôi nhà
Lớp đầu tiên— fa — là một lớp cơ sở.
Lớp thứ hai (trong ví dụ này, fa-home ) trỏ biểu tượng cụ thể mà bạn muốn sử dụng. Đây là một biểu tượng của một ngôi nhà!
Để sử dụng Thẻ HTML cho một biểu tượng, chỉ cần sao chép và dán bất kỳ vị trí nào trong trang của bạn.<i class="fa fa-home"></i>
Ví dụ:
Tạo nút ngôi sao:
Tạo icon lớn:
Để tăng kích thước của các icons thì bạn sử dụng các class fa-lg, class này sẽ tăng 33% so với kích thước mặc đinh ban đầu. Hoặc bạn có thể sử dụng các class fa-2x, fa-3x, fa-4x, fa-5x để tăng theo tỷ lệ tương ứng với tên class.
<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
Thêm Border và Pulled cho icon:
Để thêm border thì ta thêm class fa-border. Để thêm Pulled thì ta thêm class fa-pull-right hoặc fa-pull-left.
<p>
<strong>Border</strong> <br/>
<i class="fa fa-quote-left fa-3x fa-border"></i>
Trước đây để tạo các ICON đó ta phải thực hiện cắt chúng ra
từ file PSD và dùng CSS để gán background hoặc dùng thẻ img để đưa
ICON đó vào.
</p>
<p>
<strong>Border + Pulled Left</strong> <br/>
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
Trước đây để tạo các ICON đó ta phải thực hiện cắt chúng ra
từ file PSD và dùng CSS để gán background hoặc dùng thẻ img để đưa
ICON đó vào.
</p>
<p>
<strong>Border + Pulled Right</strong> <br/>
<i class="fa fa-quote-left fa-3x fa-pull-right fa-border"></i>
Trước đây để tạo các ICON đó ta phải thực hiện cắt chúng ra
từ file PSD và dùng CSS để gán background hoặc dùng thẻ img để đưa
ICON đó vào.
</p>
Thêm Stacked Icons: Stacked Icons tức là bạn tạo một icon từ nhiều icons.
Để làm được điều này ban phải tạo một thẻ span ở ngoài và bên trong là danh sách các thẻ i icon. Thẻ ngoài cùng gọi là thẻ cha và nó phải có class fa-stack, còn thẻ i bên trong là một icon bình thường như ở trên.
<p>
<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
</p>
Thêm Icon với thuộc tính after và before:
Nếu bạn để ý kỹ thì Font Awesome sẽ sử dụng hai thuộc tính after và before kết hợp với thuộc tính content để tạo nên các icons.
Ví dụ với icon quote left thì CSS của nó là:
.fa-quote-left:before {
font-family: 'FontAwesome';
content: "\f10d";
}
Như vậy ta sẽ sử dụng cú pháp này để thêm ICON vào class của riêng mình:
.class-name:before {
font-family: 'FontAwesome';
content: "\f10d";
}
Bạn có thể sử dụng firebug để xem giá trị content của các icon.
Như vây, mình đã giới thiệu cho các bạn cơ bản về Font AweSome và cách sử dụng Font Awesome để làm cho website của mình trông được chuyên nghiệp hơn. Bên dưới là các mã Class Font Awesome Bootstrap: hoặc truy cập vào đây để xem:
Bước 1: Nhúng Font Awesome bằng đường Link hoặc tải về
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
Bước 2: Tìm các Class có sẵn của Font Awesome bên dưới.
Bước 3: Sử dụng Font Awesome.
Cách sử dụng:
Bạn có thể sử dụng <i>thẻ đơn giản để đặt biểu tượng trong trang của mình, như sau:
<i class="fa fa-home"></i> = Ngôi nhà
Lớp đầu tiên— fa — là một lớp cơ sở.
Lớp thứ hai (trong ví dụ này, fa-home ) trỏ biểu tượng cụ thể mà bạn muốn sử dụng. Đây là một biểu tượng của một ngôi nhà!
Để sử dụng Thẻ HTML cho một biểu tượng, chỉ cần sao chép và dán bất kỳ vị trí nào trong trang của bạn.<i class="fa fa-home"></i>
Ví dụ:
Tạo nút ngôi sao:
<button type="button" class="btn btn-default btn-lg"> <i class="fa fa-star"></i> Star </button>
Tạo biểu tượng canh lề: Trái - Phải - Giữa - Canh đều:
<div class="btn-toolbar" role="toolbar"> <div class="btn-group"> <button type="button" class="btn btn-default"> <i class="fa fa-align-left"></i> </button> <button type="button" class="btn btn-default"> <i class="fa fa-align-center"></i> </button> <button type="button" class="btn btn-default"> <i class="fa fa-align-right"></i> </button> <button type="button" class="btn btn-default"> <i class="fa fa-align-justify"></i> </button> </div> </div>
Tạo Form nhập xuất - liên hệ:
<div class="input-group input-group-lg"> <span class="input-group-addon"> <i class="fa fa-envelope"></i> </span> <input class="form-control" type="text" placeholder="Email address"> </div> <div class="input-group input-group-lg"> <span class="input-group-addon"> <i class="fa fa-lock"></i> </span> <input class="form-control" type="password" placeholder="Password"> </div>Sử dụng Font Awesome nâng cao:
Tạo icon lớn:
Để tăng kích thước của các icons thì bạn sử dụng các class fa-lg, class này sẽ tăng 33% so với kích thước mặc đinh ban đầu. Hoặc bạn có thể sử dụng các class fa-2x, fa-3x, fa-4x, fa-5x để tăng theo tỷ lệ tương ứng với tên class.
<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
Thêm Border và Pulled cho icon:
Để thêm border thì ta thêm class fa-border. Để thêm Pulled thì ta thêm class fa-pull-right hoặc fa-pull-left.
<p>
<strong>Border</strong> <br/>
<i class="fa fa-quote-left fa-3x fa-border"></i>
Trước đây để tạo các ICON đó ta phải thực hiện cắt chúng ra
từ file PSD và dùng CSS để gán background hoặc dùng thẻ img để đưa
ICON đó vào.
</p>
<p>
<strong>Border + Pulled Left</strong> <br/>
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
Trước đây để tạo các ICON đó ta phải thực hiện cắt chúng ra
từ file PSD và dùng CSS để gán background hoặc dùng thẻ img để đưa
ICON đó vào.
</p>
<p>
<strong>Border + Pulled Right</strong> <br/>
<i class="fa fa-quote-left fa-3x fa-pull-right fa-border"></i>
Trước đây để tạo các ICON đó ta phải thực hiện cắt chúng ra
từ file PSD và dùng CSS để gán background hoặc dùng thẻ img để đưa
ICON đó vào.
</p>
Thêm Stacked Icons: Stacked Icons tức là bạn tạo một icon từ nhiều icons.
Để làm được điều này ban phải tạo một thẻ span ở ngoài và bên trong là danh sách các thẻ i icon. Thẻ ngoài cùng gọi là thẻ cha và nó phải có class fa-stack, còn thẻ i bên trong là một icon bình thường như ở trên.
<p>
<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
</p>
Thêm Icon với thuộc tính after và before:
Nếu bạn để ý kỹ thì Font Awesome sẽ sử dụng hai thuộc tính after và before kết hợp với thuộc tính content để tạo nên các icons.
Ví dụ với icon quote left thì CSS của nó là:
.fa-quote-left:before {
font-family: 'FontAwesome';
content: "\f10d";
}
Như vậy ta sẽ sử dụng cú pháp này để thêm ICON vào class của riêng mình:
.class-name:before {
font-family: 'FontAwesome';
content: "\f10d";
}
Bạn có thể sử dụng firebug để xem giá trị content của các icon.
Như vây, mình đã giới thiệu cho các bạn cơ bản về Font AweSome và cách sử dụng Font Awesome để làm cho website của mình trông được chuyên nghiệp hơn. Bên dưới là các mã Class Font Awesome Bootstrap: hoặc truy cập vào đây để xem:
