Bạn có đang sử dụng SCSS làm bộ tiền xử lý CSS trong dự án của mình không?
Chúng tôi sẽ đề cập đến những kiến thức cơ bản về cách chọn các tệp SCSS mà bạn cần cho dự án của mình, thêm Phông chữ Tuyệt vời vào bản biên dịch của bạn, đưa mã vào một lớp bằng Mixins, v.v.
Trước khi bạn bắt đầu
Hãy chắc chắn rằng bạn
Thiết lập
Bạn sẽ tìm thấy mọi thứ mình cần trong thư mục fontawesome6 của bản tải xuống Font Awesome. Dưới đây là danh sách các tệp được tạo riêng cho SCSS. Bạn có thể thêm tất cả chúng vào dự án của mình hoặc chỉ chọn những thứ bạn cần
Các tập tin Họ làm gìfontawesome.scssPhông chữ chính Biên dịch tuyệt vờibrands.scssKiểu biểu tượng thương hiệusolid.scssKiểu biểu tượng rắnregular.scssKiểu biểu tượng thông thườnglight.scssKiểu biểu tượng nhẹthin.scssKiểu biểu tượng mỏngsharp-solid.scssKiểu biểu tượng Sharp Solidduotone.scssKiểu biểu tượng Duotone_duotone-icons.scssLớp biểu tượng Duotonefontawesome.scss0Trường hợp các biến được xác định được sử dụng trong suốt quá trình tạo kiểufontawesome.scss1Các tiện ích được sử dụng trong suốt quá trình tạo kiểu/định nghĩa biểu tượng________ 12Cú pháp và định nghĩa của lớp tham chiếu biểu tượng cơ sởfontawesome.scss3Hỗ trợ kích thước biểu tượng chiều rộng hỗ trợfontawesome.scss4Hỗ trợ biểu tượng cố địnhThêm phông chữ tuyệt vời vào biên dịch của bạn
Sao chép thư mục brands.scss2 vào dự án của bạn. Sau đó sao chép toàn bộ thư mục brands.scss3 vào dự án của bạn, nơi các tệp tĩnh của bạn được phục vụ
Mở brands.scss4 của dự án của bạn và chỉnh sửa biến brands.scss5 để trỏ đến nơi bạn đã đặt thư mục brands.scss3
Trong tệp biên dịch SCSS chính của bạn, hãy nhập Phông chữ tuyệt vời bằng cách thêm tệp kiểu cốt lõi, brands.scss7. Sau đó nhập một hoặc nhiều kiểu
Đây là một ví dụ đơn giản
Nếu bạn muốn sử dụng nhiều kiểu hơn, hãy thêm nhiều kiểu nhập hơn
Sử dụng biểu tượng Duotone
Nếu một dự án sử dụng các biểu tượng Duotone, bạn sẽ cần brands.scss8 hai tệp riêng biệt
Ch-chigity Kiểm tra đường dẫn của bạn
Đảm bảo đường dẫn phông chữ và thư mục brands.scss3 của bạn có liên quan đến vị trí CSS đã biên dịch của bạn
Autoprefixer không được bao gồm trong v6
Để không quá quy định, chúng tôi đã xóa Autoprefixer (opens new window) khỏi các bước biên dịch và xây dựng của chúng tôi. Nếu dự án của bạn cần nó, bạn sẽ cần phải tự thêm nó
Thêm biểu tượng
Khi bạn đã thêm các mục nhập ở trên và thiết lập và tham chiếu CSS đã biên dịch bao gồm Phông chữ tuyệt vời trong dự án của mình, bạn có thể thêm các biểu tượng vào HTML của dự án
Đây là một ví dụ về cách tham chiếu các biểu tượng bằng CSS được biên dịch và lưu trữ của bạn
Tùy chỉnh SCSS theo lệnh của bạn
Bất kỳ thay đổi nào đối với Phông chữ Tuyệt vời (e. g. thay đổi tiền tố solid.scss0 hoặc tỷ lệ kích thước của chúng tôi), sẽ có hiệu lực trong CSS được biên dịch cho dự án của bạn
Quy tắc CSS dựa trên SCSS tùy chỉnh
Nếu bạn muốn sử dụng bất kỳ hoặc tiện ích nào của chúng tôi, bạn có thể tận dụng phương pháp Phần tử giả CSS của chúng tôi để thêm biểu tượng vào dự án của bạn để thực hiện. Phương pháp này cũng hữu ích khi thay đổi HTML trong dự án của bạn không phải là một tùy chọn
Bằng cách sử dụng các mixin solid.scss1 và solid.scss2 của chúng tôi, bạn có thể dễ dàng tạo các quy tắc phần tử giả CSS tùy chỉnh với các bộ chọn CSS dành riêng cho dự án của bạn
Trộn phong cách
Để sử dụng các mixin kiểu, bạn sẽ muốn
- Chọn mixin phù hợp với phong cách mong muốn của bạn
- Truyền vào biến SCSS cho biểu tượng bạn muốn hiển thị
Style Mixins Bao gồm cả Set Up Styles
Các mixin kiểu này cũng xử lý các kiểu hiển thị cơ bản mà chúng tôi tích hợp trong bộ công cụ của mình để đảm bảo các biểu tượng hiển thị hoàn hảo trong ngữ cảnh của chúng và trong trình duyệt
Mixin gia đình
Nếu bạn đang sử dụng mixin của chúng tôi để hiển thị một biểu tượng trong một họ cụ thể, chẳng hạn như của chúng tôi, thì bạn sẽ cần tham chiếu đến họ mixin phù hợp (e. g. solid.scss3). Cổ điển là họ phong cách mặc định của chúng tôi, vì vậy không cần đặt nó với mixin họ trừ khi bạn đang cố gắng đặt một cách rõ ràng để ghi đè một họ trước đó
Tính khả dụng của Mixin gia đình Kết xuất theo phong cách nàosolid.scss4Gói miễn phíCổ điển khi được sử dụng với các mixin theo phong cách khácsolid.scss5Chỉ chuyên nghiệpSắc nét khi được sử dụng với các mixin theo phong cách khácMột cách tiếp cận CSS tùy chỉnh thủ công hơn
Nếu bạn muốn một cách tiếp cận có thể tùy chỉnh hơn khi tuân thủ các quy tắc tạo kiểu của mình, thì chúng tôi đã cung cấp các tiện ích được sử dụng trong các mixin kiểu để có được kết quả hiển thị tương tự
Để viết các quy tắc thủ công, bạn sẽ muốn
- Lấy phong cách thiết lập cốt lõi của các biểu tượng bằng cách thêm solid.scss6
- Sử dụng solid.scss7 để bao gồm kiểu dáng nhằm hiển thị biểu tượng theo kiểu Đơn sắc (cú pháp tương tự cho các kiểu khác)
- Sử dụng solid.scss8 hoặc solid.scss9 để bao gồm kiểu dáng nhằm hiển thị biểu tượng trong một họ cụ thể (Cổ điển được đặt theo mặc định)
- Sử dụng regular.scss0 và tên biến để bao gồm các giá trị Unicode của biểu tượng dễ dàng hơn một chút. Điều này tương tự như cú pháp để thêm các biểu tượng thông qua các phần tử giả
Mixins bao gồm
Tiện ích Nó làm gìregular.scss1Một mixin ẩn trực quan phần tử chứa văn bản tương đương với một biểu tượng trong khi vẫn giữ cho nó có thể truy cập được bằng các công nghệ hỗ trợregular.scss2Một mixin được sử dụng cùng với regular.scss1 để hiển thị lại phần tử khi nó được đặt tiêu điểm (e. g. bởi người dùng chỉ sử dụng bàn phím)regular.scss4Một mixin chứa tất cả kiểu cơ sở được thiết lập cho một biểu tượng (trừ kiểu của biểu tượng và tên cụ thể/unicode) biên dịchregular.scss5regular.scss6
regular.scss7
regular.scss8
regular.scss9
light.scss0Mixins that contain all of the base style set up for an icon along with a specific style to render the icon insolid.scss5
solid.scss4Mixins that, when combined with light.scss3 style mixins, define the family of styles to be used.light.scss4A mixin to make referencing icons via the CSS light.scss5 property a bit easier.
Biến của biểu tượng phải được chuyển vào (e. g. light.scss6).
Đơn giản hóa và tùy chỉnh với các biến
Phiên bản SCSS của Font Awesome cũng tận dụng một số biến SCSS (mở cửa sổ mới) cho phép thiết lập và tùy chỉnh bộ công cụ tạo kiểu của chúng tôi dễ dàng hơn