Sử dụng biểu tượng Phông chữ tuyệt vời làm nội dung CSS

Tôi muốn sử dụng biểu tượng Font Awesome làm nội dung CSS, nghĩa là

a:before {
    content: "<i class='fa...'>...</i>";
}

Tôi biết tôi không thể sử dụng mã HTML content, vì vậy nó chỉ còn lại hình ảnh?

Cập nhật cho FontAwgie 5 ^{Cảm ơn Aurelien}

Bạn cần thay đổi font-familythành Font Awesome 5 BrandsOR Font Awesome 5 Free, dựa trên loại biểu tượng bạn đang cố hiển thị. Ngoài ra, đừng quên khai báofont-weight: 900;

a:before {
   font-family: "Font Awesome 5 Free";
   content: "\f095";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
   font-weight: 900;
}

Bản giới thiệu

Bạn có thể đọc phần còn lại của câu trả lời dưới đây để hiểu cách thức hoạt động của nó và để biết một số cách giải quyết cho khoảng cách giữa biểu tượng và văn bản.

FontAwgie 4 trở xuống

Đó là cách sử dụng sai. Mở phông chữ kiểu tuyệt vời, đi đến classphông chữ bạn muốn sử dụng fa-phone, sao chép thuộc tính nội dung trong lớp đó với thực thể và sử dụng nó như sau:

a:before {
    font-family: FontAwesome;
    content: "\f095";
}

Bản giới thiệu

Chỉ cần đảm bảo rằng nếu bạn đang muốn nhắm mục tiêu một athẻ cụ thể , sau đó xem xét sử dụng classthay thế để làm cho nó cụ thể hơn như:

a.class_name:before {
    font-family: FontAwesome;
    content: "\f095";
}

Sử dụng cách trên sẽ gắn biểu tượng với văn bản còn lại của bạn, vì vậy nếu bạn muốn có một chút khoảng trống giữa hai người, hãy tạo biểu tượng display: inline-block;và sử dụng một số padding-right:

a:before {
    font-family: FontAwesome;
    content: "\f095";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
}

Mở rộng câu trả lời này hơn nữa, vì nhiều người có thể có yêu cầu thay đổi biểu tượng khi di chuột, do đó, chúng tôi có thể viết một bộ chọn và quy tắc :hoverhành động riêng biệt :

a:hover:before {
    content: "\f099"; /* Code of the icon you want to change on hover */
}

Bản giới thiệu

Bây giờ trong ví dụ trên, biểu tượng khoả thân vì kích thước khác nhau và bạn chắc chắn không muốn điều đó, vì vậy bạn có thể đặt cố định widthtrên khai báo cơ sở như

a:before {
    /* Other properties here, look in the above code snippets */
    width: 12px; /* add some desired width here to prevent nudge */
}

Bản giới thiệu

Một giải pháp khác mà bạn không phải loay hoay với các ký tự Unicode có thể được tìm thấy trong Making Font Awesome Awesome - Sử dụng các biểu tượng không có thẻ i ( từ chối trách nhiệm: Tôi đã viết bài viết này ).

Tóm lại, bạn có thể tạo một lớp mới như thế này:

.icon::before {
    display: inline-block;
    margin-right: .5em;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}

Và sau đó sử dụng nó với bất kỳ biểu tượng nào, ví dụ:

<a class="icon fa-car" href="#">This is a link</a>

Nếu bạn có quyền truy cập vào các tệp SCSS từ font-awesome, bạn có thể sử dụng giải pháp đơn giản này:

.a:after {
    // Import mixin from font-awesome/scss/mixins.scss
    @include fa-icon();

    // Use icon variable from font-awesome/scss/variables.scss
    content: $fa-var-exclamation-triangle;
}

a:before {
     content: "\f055";
     font-family: FontAwesome;
     left:0;
     position:absolute;
     top:0;
}

Liên kết ví dụ: https://codepen.io/bungeedesign/pen/XqeLQg

Nhận mã Biểu tượng từ: https://fontawclaw.com/chcoateet? From = io

Bạn có thể sử dụng unicode cho điều này trong CSS. Nếu bạn đang sử dụng font awesome 5, đây là cú pháp;

.login::before {
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f007";  
}

Bạn có thể xem tài liệu của họ ở đây .

Bạn nên đặt trọng lượng phông chữ thành 900 cho phông chữ Font Awesome 5 miễn phí để hoạt động.

Đây là một trong những hoạt động:

.css-selector::before {
   font-family: 'Font Awesome 5 Free';
   content: "\f101";
   font-weight: 900;
}

Như đã nói tại trang web FontAwgie FontAwgie =>

HTML:

<span class="icon login"></span> Login</li>

CSS:

 .icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

    .login::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f007";
   }

Trong .login::before-> chỉnh sửa content:'';cho phù hợp với unicode của bạn.

Cập nhật cho Font Awesome 5 bằng SCSS

.icon {
  @extend %fa-icon;
  @extend .fas;

  &:before {
    content: fa-content($fa-var-user);
  }
}

Đây là giải pháp webpack 4 + font tuyệt vời của tôi:

plugin webpack:

new CopyWebpackPlugin([
    { from: 'node_modules/font-awesome/fonts', to: 'font-awesome' }
  ]),

phong cách css toàn cầu:

@font-face {
    font-family: 'FontAwesome';
    src: url('/font-awesome/fontawesome-webfont.eot');
    src: url('/font-awesome/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
    url('/font-awesome/fontawesome-webfont.woff2') format('woff2'),
    url('/font-awesome/fontawesome-webfont.woff') format('woff'),
    url('/font-awesome/fontawesome-webfont.ttf') format('truetype'),
    url('/font-awesome/fontawesome-webfont.svgfontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

i {
    font-family: "FontAwesome";
}