Các biểu tượng hoạt động tốt để minh họa các hành động mà người dùng có thể thực hiện trong một ứng dụng. Có sẵn một số thư viện biểu tượng. Đây là một vài trong số rất nhiều:
- Font Awesome - https://fontawesome.com/
- Flaticon - https://www.flaticon.com/
- Biểu tượng Material Design - https://material.io/resources/icons/
Chắc chắn có nhiều thứ hơn đã đề cập ở trên, nhưng mục tiêu của hướng dẫn này là chỉ cho bạn cách sử dụng một trong các thư viện ở trên cho dự án của bạn và nhắm mục tiêu nó để kiểm soát phong cách. Bên cạnh đó, khi bạn tìm hiểu quy trình cho một thư viện, quy trình này rất giống với các thư viện khác.
Trong bài viết này, chúng tôi sẽ sử dụng Thư viện biểu tượng tuyệt vời về phông chữ. Trong trình chỉnh sửa bên dưới, hãy chú ý đến <link> trong phần đầu của tài liệu HTML. Đây là một tệp CSS được rút gọn về cơ bản tham chiếu đến thư viện biểu tượng của Font Awesome. "Thu nhỏ" về cơ bản đề cập đến thực tế là tất cả khoảng trắng đã biến mất - vì vậy thực sự không có bất kỳ định dạng nào.
Miễn là bạn có mạng phân phối nội dung này - CDN - trong <head> , bạn sẽ có thể truy cập hầu hết tất cả thư viện miễn phí của Font Awesome. Cũng có một thư viện SVG, nhưng chúng ta sẽ đi sâu vào vấn đề đó khi chúng ta nói thêm về JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icons</title>
<style>
.icon-container {
font-size: 24px;
}
.fab {
font-size: 3rem;
color: #1DA1F1;
}
.fa-heart {
font-size: 4rem;
color: crimson;
}
</style>
</head>
<body>
<!-- Icons will go here -->
<div class="icon-container">
<i class="fab fa-twitter"></i>
<span class="fas fa-camera"></span>
<span class="fas fa-heart"></span>
</div>
</body>
</html>
Trong trình chỉnh sửa ở trên, bạn sẽ thấy trong phần nội dung chúng ta có hai phần tử nội tuyến, một <i> và một <span> yếu tố. Dù bằng cách nào thì đây cũng là một cách hợp lệ để viết ra các biểu tượng trong phần đánh dấu của bạn. Cá nhân tôi đã thấy <i> được sử dụng nhiều nhất, nhưng tôi cũng đã thấy <span> vào một dịp hiếm hoi.
Bạn sẽ thấy rằng nội dung của phần tử trống. Thuộc tính class là cách chúng tôi lấy biểu tượng mà chúng tôi cần từ thư viện của Font Awesome bằng cách sử dụng tệp CSS mà chúng tôi đã chèn vào phần đầu của tệp HTML.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Nếu bạn muốn xem qua tệp CSS để biết những gì bạn đang làm việc, bạn chắc chắn có thể làm được điều đó. Tuy nhiên, nó sẽ cung cấp cho bạn một bức tường văn bản, vì vậy nó có thể hơi choáng ngợp. Chỉ cần biết rằng nó có tất cả thông tin bạn cần để chèn các biểu tượng miễn phí vào dự án của mình.
Tên lớp của biểu tượng có hai phần:tiền tố kiểu và tên biểu tượng. Trong ví dụ trên, chúng ta thấy "fab" và "fas". "Fa" là viết tắt của phông chữ tuyệt vời, "b" là viết tắt của thương hiệu và "s" là viết tắt của rắn. Ngoài ra còn có các tiền tố khác, nhưng những tiền tố này yêu cầu tài khoản CHUYÊN NGHIỆP.
Tên biểu tượng có thể được tìm thấy khi bạn đang xem qua thư viện biểu tượng trên trang web của Font Awesome. Nó thường sẽ tuân theo quy ước bạn thấy ở trên:“fa-
Các biểu tượng phải được coi như các phần tử nội tuyến khi tạo kiểu cho chúng và kiểm soát vị trí của chúng trên trang bằng CSS. Để biết thêm thông tin về cách tạo kiểu biểu tượng của Font Awesome, vui lòng xem tài liệu của họ, tài liệu này thực sự đơn giản và sẽ giúp bạn thực hành một số cách đọc tài liệu. Một ví dụ về tạo kiểu bằng CSS có trong trình chỉnh sửa ở trên.
Hãy thoải mái sử dụng môi trường hộp cát ở trên để chơi với các biểu tượng và bắt đầu tạo kiểu cho chúng!