Sử dụng Phông chữ Biểu tượng Tuyệt vời trong CSS

Tôi có một số CSS trông như thế này:

#content h2 {
   background: url(../images/tContent.jpg) no-repeat 0 6px;
}

Tôi muốn thay thế hình ảnh bằng một biểu tượng từ Font Awesome .

Dù sao tôi cũng không thấy sử dụng biểu tượng trong CSS làm hình nền. Điều này có thể thực hiện được không khi giả sử các kiểu / phông chữ Font Awesome được tải trước CSS của tôi?

Bạn không thể sử dụng văn bản làm hình nền, nhưng bạn có thể sử dụng các lớp giả :beforehoặc :afterđể đặt một ký tự văn bản ở nơi bạn muốn mà không cần phải thêm tất cả các loại đánh dấu thêm lộn xộn.

Hãy chắc chắn đặt position:relativetrên trình bao bọc văn bản thực tế của bạn để định vị hoạt động.

.mytextwithicon {
    position:relative;
}    
.mytextwithicon:before {
    content: "\25AE";  /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    left:-5px;
    position:absolute;
    top:0;
 }

BIÊN TẬP:

Font Awesome v5 sử dụng các tên phông chữ khác so với các phiên bản cũ hơn:

• Đối với FontAwgie v5, Phiên bản miễn phí, hãy sử dụng: font-family: "Font Awesome 5 Free"
• Đối với FontAwgie v5, Phiên bản Pro, hãy sử dụng: font-family: "Font Awesome 5 Pro"

Lưu ý rằng bạn cũng nên đặt thuộc tính trọng lượng phông chữ tương tự (dường như là 900).

Một cách khác để tìm tên phông chữ là nhấp chuột phải vào biểu tượng tuyệt vời của phông chữ mẫu trên trang của bạn và lấy tên phông chữ (giống như mã biểu tượng utf-8 có thể được tìm thấy, nhưng lưu ý rằng bạn có thể tìm thấy nó trên đó :before).

Ngoài câu trả lời từ Diodeus ở trên, bạn cần có font-family: FontAwesomequy tắc (giả sử bạn có @font-facequy tắc cho FontAwgie đã được khai báo trong CSS của bạn). Sau đó, vấn đề là biết giá trị nội dung CSS nào tương ứng với biểu tượng nào.

Tôi đã liệt kê tất cả ở đây: http://astronautweb.co/snippet/font-awclaw/

Trên thực tế, ngay cả font-awesomeCSS cũng có một chiến lược tương tự để thiết lập các kiểu biểu tượng của chúng. Nếu bạn muốn nhanh chóng nắm giữ icon mã , hãy kiểm tra non-minified font-awesome.csstệp và chúng có .... mỗi phông chữ trong độ tinh khiết của nó.

Hợp nhất mọi thứ ở trên, sau đây là lớp cuối cùng hoạt động tốt

   .faArrowIcon {
        position:relative;
    }

    .faArrowIcon:before {
        font-family: FontAwesome;
        top:0;
        left:-5px;
        padding-right:10px;
        content: "\f0a9"; 
    }

Bạn có thể thử lớp ví dụ này. và tìm nội dung biểu tượng tại đây: http://astronautweb.co/snippet/font-awclaw/

  #content h2:before {
    display: inline-block;
    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);
    content: "\f007";
    }

Để sử dụng phông chữ tuyệt vời bằng cách sử dụng css, hãy làm theo các bước dưới đây -

Bước 1 - Thêm phông chữ của FontAwgie trong CSS

/*Font Awesome Fonts*/
@font-face {
    font-family: 'FontAwesome';
    //in url add your folder path of FontAwsome Fonts
    src: url('font-awesome/fontawesome-webfont.ttf') format('truetype');
}

Bước - 2 Sử dụng css bên dưới để áp dụng phông chữ trên thành phần lớp của HTML

.sorting_asc:after {
    content: "\f0de"; /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    padding-left: 10px !important;
    vertical-align: middle;
}

Và cuối cùng, sử dụng lớp " sorting_asc " để áp dụng css trên thẻ / phần tử HTML mong muốn.

Không cần phải nhúng nội dung vào CSS. Bạn có thể đặt nội dung huy hiệu bên trong phần tử fa, sau đó điều chỉnh css huy hiệu. http://jsfiddle.net/vmjwayrk/2/

<i class="fa fa-envelope fa-5x" style="position:relative;color:grey;">
  <span style="
        background-color: navy;
        border-radius: 50%;
        font-size: .25em;
        display:block;
        position:absolute;
        text-align: center;
        line-height: 2em;
        top: -.5em;
        right: -.5em;
        width: 2em;
        height: 2em;
        border:solid 4px #fff;
        box-shadow:0px 0px 1px #000;
        color: #fff;
    ">17</span>
</i>

Ngoài ra, nếu sử dụng Sass, người ta có thể "mở rộng" các biểu tượng FA để hiển thị chúng:

.mytextwithicon:before {
  @extend .fas, .fa-angle-double-right;

  @extend .mr-2; // using bootstrap to add a small gap
                 // between the icon and the text.
}

#content h2: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

Đối với điều này, bạn chỉ cần thêm contentthuộc tính và font-familythuộc tính cho phần tử được yêu cầu thông qua: trước hoặc: sau bất cứ nơi nào áp dụng.

Ví dụ: Tôi muốn đính kèm một biểu tượng đính kèm sau tất cả các ayếu tố bên trong bài viết của tôi. Vì vậy, trước tiên tôi cần tìm kiếm nếu biểu tượng đó tồn tại trong fontawgie. Giống như trong trường hợp tôi tìm thấy nó ở đây , tức là fa fa-paperclip. Sau đó, tôi sẽ nhấp chuột phải vào biểu tượng ở đó và đi đến thuộc tính ::beforegiả để tìm nạp contentthẻ mà nó đang sử dụng, trong trường hợp của tôi, tôi thấy là như vậy \f0c6. Sau đó, tôi sẽ sử dụng nó trong css của tôi như thế này:

   .post a:after {
     font-family: FontAwesome,
     content: " \f0c6" /* I added a space before \ for better UI */
    }

Sử dụng chương trình Python sau thông qua dòng lệnh để tạo hình ảnh png từ các biểu tượng Font-Awesome:

https://github.com/Pythonity/font-awgie-to-png