STDIO
Tìm kiếm gần đây
    • 0

    Tích Hợp Font-Awesome vào Website

    Hướng dẫn tích hợp font Awesome vào website.
    01/09/2015
    03/09/2020
    1 phút đọc
    Tích Hợp Font-Awesome vào Website

    Font-Awesome

    Font Awesome có thể được tải tại đây.

    Giải nén ra sẽ được thư mục chứa bộ font, bài viết này sẽ để thư mục font cùng cấp với index.html để dễ tích hợp.

    fontawesome-free-x.x.x-web.zip

    Include thư viện

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Demo Font-Awesome</title>
            <link rel="stylesheet" type="text/css" href="./fontawesome-free-5.14.0-web/css/all.css" />
            <style></style>
        </head>
        <body>
            <i class="fas fa-camera"></i>
        </body>
    </html>

    Để thêm font thì phải trỏ tới đường dẫn thư mục font hiện tại href="fontawesome-free-5.14.0-web/css/all.css".

    Sử dụng font

    Ngay giữa cặp thẻ <body> dùng cặp thẻ <i>. Ví dụ:

    <body>
        <i class="fas fa-camera"></i>
    </body>
    Icon Camera

    Vậy là có thể tạo ra được một icon.

    Vì là font chữ nên dung lượng của nó rất gọn nhẹ, có thể đổi màu hoặc tăng kích thước cho icon.

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Demo Font-Awesome</title>
            <link rel="stylesheet" type="text/css" href="./fontawesome-free-5.14.0-web/css/all.css" />
        </head>
        <body>
            <span style="font-size: 3rem; color: Tomato">
                <i class="fas fa-camera"></i>
            </span>
            <span style="font-size: 3rem; color: Dodgerblue">
                <i class="fas fa-camera"></i>
            </span>
            <span style="font-size: 3rem; color: Mediumslateblue">
                <i class="fas fa-camera"></i>
            </span>
        </body>
    </html>
    Đổi màu và kích thước icon

    Animation

    Một điểm mạnh nữa ở bộ font này là có thể tạo hiệu ứng cho icon.

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Demo Font-Awesome</title>
            <link rel="stylesheet" type="text/css" href="./fontawesome-free-5.14.0-web/css/all.css" />
        </head>
        <body>
            <span style="font-size: 3rem; color: Tomato">
                <i class="fa fa-spinner fa-spin fa-5x"></i>
            </span>
        </body>
    </html>
    Hiệu ứng của icon

    Mỗi một font có thể linh động tùy biến khác nhau theo người dùng, tùy theo sự sáng tạo của mỗi người mà làm cho trang web thêm sinh động.

    HTML Cheat Sheet

    HTML Cheat Sheet

    STDIO Training - Đào tạo lập trình Front-end.

    Sản phẩm

    Đề xuất

    Tích Hợp Thư Viện Vật Lý Box2D Vào Project C++

    Tích Hợp Thư Viện Vật Lý Box2D Vào Project C++

    Trong quá trình phát triển game, việc viết lại các thư viện mô phỏng vật ...

    Lập Trình GameKiến Thức Nâng Cao

    10/11/2015

    EmguCV - OpenCV cho .NET - Giới Thiệu và Cách Tích Hợp vào .NET

    EmguCV - OpenCV cho .NET - Giới Thiệu và Cách Tích Hợp vào .NET

    Giới thiệu về wrapper EmguCV của OpenCV và hướng dẫn cách tích hợp ...

    Computer VisionOpenCV

    22/01/2015

    Khám phá thêm

    Đôi Mắt Dõi Theo Con Trỏ Chuột Với Thuần JavaScript

    Đôi Mắt Dõi Theo Con Trỏ Chuột Với Thuần JavaScript

    Tạo đôi mắt có thể dõi theo con trỏ chuột với JavaScript thuần (không ...

    JavaScriptJavaScript Nâng Cao

    12/09/2014

    CBP-3: Khai Báo Component Cơ Bản, Tích Hợp Component vào Entity

    CBP-3: Khai Báo Component Cơ Bản, Tích Hợp Component vào Entity

    Khai báo component CAnimation để thêm hình ảnh hiển thị cho Entity, đây ...

    Lập Trình GameKiến Thức Nâng Cao

    20/08/2015

    Học SEO Trong 1 Ngày - Phần 2

    Học SEO Trong 1 Ngày - Phần 2

    Phân tích keyword thủ công để nâng cao khả năng chủ động trong việc tìm ...

    STDIO SolutionsSEO

    11/07/2020

    Học SEO Trong 1 Ngày - Phần 1

    Học SEO Trong 1 Ngày - Phần 1

    Hiểu biết về cách hoạt động của Google, keyword và các công cụ hỗ trợ ...

    STDIO SolutionsSEO

    11/07/2020

    Scroll To Top Button - Quay Lại Đầu Trang Web

    Scroll To Top Button - Quay Lại Đầu Trang Web

    Scroll to top button là button được sử dụng để cuộn trang về đầu 1 cách ...

    JavaScriptJavaScript Nâng Cao

    01/09/2015

    Phép Tích Chập Trong Xử Lý Ảnh (Convolution)

    Phép Tích Chập Trong Xử Lý Ảnh (Convolution)

    Convolution là kỹ thuật quan trọng trong Xử Lý Ảnh, được sử dụng chính ...

    Computer VisionNền tảng

    20/04/2016

    SASS và Các Cú Pháp Cơ Bản

    SASS và Các Cú Pháp Cơ Bản

    Sass - Syntactically Awesome Style Sheets là 1 mở rộng của CSS, là 1 ...

    Trần Thị Thu Hiền

    06/01/2015

    Thỏa Thuận Sử Dụng Dịch Vụ STDIO

    Thỏa Thuận Sử Dụng Dịch Vụ STDIO

    Thỏa thuận này quy định về điều kiện giao kết hợp đồng, quyền lợi, nghĩa ...

    STDIOChính sách

    07/04/2014

    STDIO
    Trang chính
    Công ty TNHH STDIO

    30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
    +84 28.36205514 - +84 942.111912
    developer@stdio.vn

    383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
    Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012

    ©STDIO, 2013 - 2020