Thêm Font Awesome vào Flatsome

Thêm Font Awesome vào Flatsome. Font Awesome vẫn là Icon Font phổ biến và tốt nhất hiện nay, không chỉ đầy đủ các icon mà còn đẹp và rất nhẹ. Do đó Font Awesome là font được lựa chọn hàng đầu của các lập trình viên.

Thêm Font Awesome vào Flatsome

Giới thiệu về Font Awesome

Font Awesome là font phổ biến với nhiều lập trình viên hiện nay, font cung cấp cho bạn hơn 1700 icon miễn phí, giúp cho website của bạn trở nên đẹp hơn với các icon với một cách dễ dàng.

Nếu ta sử dụng hình ảnh thì tốc độ load của website sẽ chậm hơn bởi vì ta phải load môt hình ảnh khá là nặng nề. Nhưng với Font Awesome thì ban chỉ cần load một file CSS, một file Font và chỉ load một lần duy nhất nên tốc độ sẽ được cải thiện đáng kể.

Hướng dẫn tích hợp Font Awesome

Bước 1: Download Font Awesome

Trước tiên, bạn cần truy cập trang web Font Awesome để tải gói phông chữ miễn phí về.

Sau đó giải nén trong thư mục child-theme tại thư mục flatsome-child/fontawesome-free

Bước 2: Khai báo Font Awesome

Thêm đoạn snippet include Font Awesome trong functions.php trong child theme như sau:

// Add Font Awesome
function wpb_load_fa() {
	wp_enqueue_style( 'wpb-fa', get_stylesheet_directory_uri() . '/fontawesome-free/css/all.css' );
}
add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );

// Add Font Awesome

function wpb_load_fa() {

wp_enqueue_style( 'wpb-fa', get_stylesheet_directory_uri() . '/fontawesome-free/css/all.css' );

}

add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );

Hướng dẫn sử dụng Font Awesome 5 bản miễn phí

Bước 3: Hiển thị Font Awesome

Bạn tới trang Font Awesome’s website để xem danh sách đầy đủ các biểu tượng có sẵn.

Nhấp vào bất kỳ biểu tượng nào bạn muốn sử dụng và sao chép đoạn mã như ví dụ dưới đây vào trang của bạn. Ví dụ như:

<i class="fab fa-apple"></i>

1	<i class="fab fa-apple"></i>

hay style như

ul li:before {
    content: '\f0da';
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
}

ul li:before {

content: '\f0da';

font-family: "Font Awesome 5 Free";

font-style: normal;

font-weight: 700;

font-size: 14px;

}

Chú ý: khi thêm Font Awesome bằng CSS bạn nhớ thêm thuộc tính font-weight: 700; vì bạn đang sử dụng Font Awesome 5 Free chỉ hỗ trợ kiểu font Solid