Phông chữ CSS tuyệt vời
|
Font Awesome được thiết kế để sử dụng với các phần tử nội tuyến. Các phần tử Show
Cũng lưu ý rằng nếu bạn thay đổi cỡ chữ hoặc màu của vùng chứa biểu tượng, biểu tượng sẽ thay đổi. Điều tương tự cũng xảy ra với bóng và bất kỳ thứ gì khác được kế thừa bằng CSS Các lớp Ví dụĐoạn mã sau Kết quả trong Tự mình thử »Mẹo. Nếu các biểu tượng của bạn bị cắt ở trên và dưới, hãy tăng chiều cao dòng Các lớp Ví dụĐoạn mã sau
Kết quả trong
Các lớp Ví dụĐoạn mã sau
Kết quả trong Lorem ipsum dolor sit amet, consectetur adipisizing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercite ullamcolaboris nisi ut aliquip ex ea commodo do đó. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur Tự mình thử »Lớp Ví dụĐoạn mã sau Kết quả trong Tự mình thử »Ghi chú. IE8 và IE9 không hỗ trợ hoạt hình CSS3 Các lớp Ví dụĐoạn mã sau Kết quả trong Tự mình thử »Để xếp chồng nhiều biểu tượng, hãy sử dụng lớp Lớp Ví dụĐoạn mã sau
Kết quả trong fa-twitter trên fa-circle-thin Lớp Khi thay đổi HTML trong dự án của bạn không phải là một tùy chọn, bạn có thể sử dụng tính năng CSS để thêm biểu tượng vào trang khi sử dụng Font Awesome Web Fonts Làm việc với các phần tử giả không dành cho người yếu tim Tham chiếu các biểu tượng bằng cách sử dụng các phần tử giả phức tạp hơn và dễ bị lỗi hơn so với cách thông thường là thả một phần tử Đảm bảo rằng bạn hiểu rõ về CSS và sẵn sàng tìm hiểu về một số nền tảng giúp Font Awesome hoạt động Giới thiệu về phần tử giảCSS có một tính năng mạnh mẽ được gọi là Phần tử giả (mở cửa sổ mới) cho phép bạn thêm nội dung vào trang một cách trực quan chỉ bằng CSS. Font Awesome đã tận dụng phần tử giả Chúng ta đã biết rằng Font Awesome sử dụng các lớp như Thêm một biểu tượng bằng cách sử dụng các phần tử giả CSS1. Xác định CSS chung cho tất cả các biểu tượngTrước tiên, bạn sẽ cần thêm một số thuộc tính CSS phổ biến áp dụng cho tất cả các biểu tượng. Tốt nhất là bạn nên giải quyết vấn đề này trước để đơn giản hóa CSS biểu tượng riêng lẻ của bạn. Bạn có thể biến nó thành một quy tắc riêng hoặc bao gồm kiểu dáng trong mọi quy tắc biểu tượng riêng lẻ (trong bước tiếp theo) 2. Tham khảo biểu tượng cá nhânCó một vài mục quan trọng cần đưa vào khi tham khảo bất kỳ biểu tượng riêng lẻ nào
Đây là một biểu đồ hữu ích về các kiểu/trọng lượng phông chữ mà bạn có thể sử dụng fa-lg8 hoặcfa-lg9 đối với người dùng Profa-2x0fa-lg20SolidFree Planfa-lg8 hoặcfa-lg9 đối với người dùng Profa-lg23fa-lg24RegularProDuotone là một trường hợp đặc biệt mà chúng tôi đã đề cập dưới đây trong Xem phần tử giả CSS trong hành động Cần một ví dụ thực tế hơn về cách làm điều này? Phần tử giả CSS và DuotoneViệc sử dụng các phần tử giả CSS để hiển thị các biểu tượng hai tông màu tuân theo một thiết lập tương tự, nhưng yêu cầu sử dụng cả hai phần tử giả 1. Xác định CSS phổ biến cho các biểu tượng DuotoneCó các thuộc tính CSS được chia sẻ duy nhất cho phong cách Duotone mà tất cả các biểu tượng của bộ đôi sẽ cần. Một lần nữa, tốt nhất là bạn nên loại bỏ điều này trước trong CSS của mình để đơn giản hóa các định nghĩa biểu tượng của bạn
2. Tham khảo các lớp của biểu tượng riêng lẻViệc tham chiếu các biểu tượng bộ đôi riêng lẻ hoạt động giống như tất cả việc sử dụng biểu tượng phần tử giả CSS. Đặt nội dung thành giá trị unicode của một trong các biểu tượng của chúng tôi. Đối với các biểu tượng Duotone, bạn sẽ có hai giá trị — một giá trị cho mỗi lớp Duotone. Đối với Phần tử giả và Sass (SCSS)Sử dụng Nếu bạn muốn, đó cũng là một lựa chọn Nếu bạn đang sử dụng mixin của chúng tôi để hiển thị biểu tượng trong , bạn sẽ cần tham khảo mixin Các phần tử giả và Ít hơnSử dụng Nếu bạn muốn, đó cũng là một lựa chọn Nếu bạn đang sử dụng mixin của chúng tôi để hiển thị biểu tượng trong , bạn sẽ cần tham khảo mixin Phần tử giả CSS với Khung SVG+JS của chúng tôiNếu bạn đang sử dụng khung SVG + JS của chúng tôi để hiển thị biểu tượng, bạn cần thực hiện thêm một số thao tác Kích hoạt phần tử giảViệc sử dụng các phần tử giả CSS để hiển thị các biểu tượng bị tắt theo mặc định khi sử dụng Khung SVG + JS của chúng tôi. Bạn sẽ cần thêm Làm cách nào để sử dụng Phông chữ tuyệt vời trong CSS?Cách sử dụng các biểu tượng tuyệt vời của phông chữ làm mã nội dung CSS . Step 1: Load the font awesome CSS file. Add the font awesome CSS file in the tag of the page. .. . Bước 2. Xác định tên lớp CSS cho các biểu tượng. . Bước 3. Đặt mã nội dung CSS cho biểu tượng. . Bước 4. Đặt kiểu phông chữ biểu tượng. . Bước 5. Thêm các kiểu phổ biến cho các biểu tượng Font Awesome có phải là CSS không?Phông chữ Awesome cung cấp cho bạn các biểu tượng véc-tơ có thể thay đổi quy mô có thể được tùy chỉnh ngay lập tức — kích thước, màu sắc, đổ bóng và bất kỳ thứ gì có thể thực hiện được với sức mạnh của CSS.
Làm cách nào để sử dụng Phông chữ tuyệt vời 6 trong CSS?Thiết lập . Sử dụng một bộ Bắt đầu Sử dụng Trình quản lý gói tự tổ chức. Tự lưu trữ - Phông chữ web. Tự lưu trữ - SVG + JS Nâng cấp. Nâng cấp lên phiên bản 6. Có gì thay đổi. Sass (SCSS) trở xuống. Thành phần JavaScript. Trình quản lý gói. Gói Python/Django. WordPress. SVG + SVG Sprite. Phần tử giả CSS. Nâng cấp từ Phiên bản 4 Làm cách nào để thêm biểu tượng thông qua CSS?Cách đơn giản nhất để thêm biểu tượng vào trang HTML của bạn là sử dụng thư viện biểu tượng, chẳng hạn như Phông chữ tuyệt vời. Thêm tên của lớp biểu tượng đã chỉ định vào bất kỳ phần tử HTML nội tuyến nào (như . Tất cả các biểu tượng trong thư viện biểu tượng bên dưới, là các vectơ có thể mở rộng có thể được tùy chỉnh bằng CSS (kích thước, màu sắc, bóng, v.v. ) |
