Chia sẻ Cheatsheet Font Awesome đầy đủ các phiên bản và cách sử dụng

cheatsheet-icon-font-aweshome
5/5 - (201 bình chọn)

Font Awesome là một thư viện đầy đủ các biểu tượng mở rộng cho việc sử dụng trên trang web của bạn. Với hàng trăm biểu tượng cả trả phí lẫn miễn phí, Font Awesome cung cấp cho bạn sự sáng tạo để tạo ra giao diện trực quan và hấp dẫn cho người dùng.

Trong bài viết này, chúng ta sẽ khám phá tổng hợp Icon Font Awesome Cheatsheet và cách sử dụng chúng cho Website WordPress của bạn nhé.

Danh sách Cheatsheet Icon Font Awesome

Nếu bạn đang dùng Plugin liên hệ của Liêm MKT thì có thể lấy code tên gọi của font dựa theo 2 file pdf phía dưới (ví dụ dùng icon Address thì chỉ cần copy fa-address-card rồi bỏ vào ô Icon liên hệ là được)

Font Awesome 4.7.0 Cheatsheet trở về trước

Font Awesome 5 Cheatsheet

Các sử dụng biểu tượng Font Awesome

Để sử dụng biểu tượng Font Awesome trong dự án của bạn, sẽ có nhiều cách. Nếu muốn biết cách CSS để gọi font tương ứng vào trang web của mình. Thì bạn có thể làm theo ví dụ dưới đây của Liêm MKT:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ví dụ Icon CSS với Content</title>
    <!-- Thêm thư viện Font Awesome để sử dụng icon -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        /* Định dạng kích thước và màu sắc của icon */
        .my-icon::before {
            content: '\f272'; /* Mã Unicode của icon */
            font-family: 'Font Awesome 5 Free'; /* Font chứa icon */
            font-size: 24px;
            color: #3498db;
        }
    </style>
</head>
<body>
    <!-- Sử dụng phần tử với lớp CSS để hiển thị icon -->
    <div class="my-icon"></div>

    <!-- Các thẻ HTML và nội dung khác trong trang web của bạn -->
</body>
</html>

Trong ví dụ này, Liêm sử dụng ::before để chèn icon trước phần tử .my-icon. Thuộc tính content chứa icon được sử dụng để chỉ định mã Unicode của icon (\f272), và font-familytên của font chứa icon (trong trường hợp này ta gọi font từ cdnjs.cloudflare.com là ‘Font Awesome 5’).

Lớp my-icon có thể được thêm vào bất kỳ phần tử nào khác, và icon sẽ hiển thị theo định dạng được đặt trong CSS.

Cách để gọi Stylesheet của Font Awesome từ Cloudflare

Các bạn Copy cách dưới rồi bỏ vào trong file functions.php của Website là được.

function add_font3(){
    echo '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />';
}
add_action('wp_head','add_font3');

Cách dùng Font Awesome phiên bản mới nhất

Ngoài hai cách trên thì còn 1 cách gọi Font Awesome qua thẻ html là <i></i>. Để dùng cách này thì các bạn có thể truy cập vào Website của FontAwesome để tiến hành cài đặt (hoặc bạn đã làm cách gọi cheatsheet rồi thì chỉ cần copy mã html của icon về rồi xài thôi – ví dụ: <i class="fa-solid fa-plus-minus"></i>). Cách cài đặt thì các bạn có thể xem video hướng dẫn sử dụng Font Awesome bên dưới.

…Video đang cập nhật

Kết luận

Hy vọng sau khi xem xong bài viết về danh sách các Icon của Font Awesome và cách sử dụng chi tiết này của Liêm MKT thì bạn cũng hiểu cách vận hành tổng thể như thế nào để áp dụng cho Website của mình. Nếu bạn thấy hay thì nhớ chia sẻ cho bạn bè cùng tham khảo nhé.

Theo dõi
Thông báo của
2 Bình luận
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
Thiên Nguyễn
Thiên Nguyễn
18 ngày trước

Rất ý nghĩa ạ

K61 HOÀNG THẢO CHI
K61 HOÀNG THẢO CHI
15 ngày trước

em cám ơn anh ạ

Zalo
2
0
Rất thích suy nghĩ của bạn, hãy bình luận.x