Gunakan Font Awesome Ikon di CSS

Saya memiliki beberapa CSS yang terlihat seperti ini:

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

Saya ingin mengganti gambar dengan ikon dari Font Awesome .

Saya tidak melihat pula untuk menggunakan ikon di CSS sebagai gambar latar belakang. Apakah ini mungkin dilakukan dengan asumsi Font Awesome stylesheet / font dimuat sebelum CSS saya?

Anda tidak dapat menggunakan teks sebagai gambar latar belakang, tetapi Anda bisa menggunakan kelas pseudo :beforeatau :afteruntuk menempatkan karakter teks di mana Anda inginkan, tanpa harus menambahkan semua jenis markup ekstra berantakan.

Pastikan untuk position:relativemenggunakan pembungkus teks Anda yang sebenarnya agar positioning berfungsi.

.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;
 }

EDIT:

Font Awesome v5 menggunakan nama font lain selain versi yang lebih lama:

• Untuk FontAwesome v5, Versi Gratis, gunakan: font-family: "Font Awesome 5 Free"
• Untuk FontAwesome v5, Versi Pro, gunakan: font-family: "Font Awesome 5 Pro"

Perhatikan bahwa Anda harus mengatur properti font-weight yang sama juga (tampaknya 900).

Cara lain untuk menemukan nama font adalah dengan mengklik kanan pada ikon contoh font yang mengagumkan pada halaman Anda dan mendapatkan nama font (cara yang sama kode ikon utf-8 dapat ditemukan, tetapi perhatikan bahwa Anda dapat menemukannya di :before).

Selanjutnya untuk jawaban dari Diodeus di atas, Anda memerlukan font-family: FontAwesomeaturan (dengan asumsi Anda memiliki @font-faceaturan untuk FontAwesome sudah dinyatakan dalam CSS Anda). Maka itu adalah masalah mengetahui nilai konten CSS yang sesuai dengan ikon mana.

Saya telah mendaftarkan semuanya di sini: http://astronautweb.co/snippet/font-awesome/

Sebenarnya bahkan font-awesomeCSS memiliki strategi serupa untuk mengatur gaya ikon mereka. Jika Anda ingin mendapatkan icon kode dengan cepat , periksa non-minified font-awesome.cssfile dan ada mereka .... masing-masing font dalam kemurniannya.

Menggabungkan semua hal di atas, berikut ini adalah kelas terakhir yang berfungsi dengan baik

   .faArrowIcon {
        position:relative;
    }

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

Anda dapat mencoba kelas contoh ini. dan temukan konten ikon di sini: http://astronautweb.co/snippet/font-awesome/

  #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";
    }

Untuk menggunakan font yang mengagumkan menggunakan css ikuti langkah-langkah di bawah ini -

langkah 1 - Tambahkan Font of FontAwesome di 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');
}

Langkah - 2 Gunakan css di bawah ini untuk menerapkan font pada elemen kelas 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;
}

Dan akhirnya, gunakan kelas " sorting_asc " untuk menerapkan css pada tag / elemen HTML yang diinginkan.

Tidak perlu menyematkan konten ke dalam CSS. Anda dapat menempatkan konten lencana di dalam elemen fa, lalu sesuaikan badge css. 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>

Atau, jika menggunakan Sass, seseorang dapat "memperluas" ikon FA untuk menampilkannya:

.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;
}

Contoh Tautan: https://codepen.io/bungeedesign/pen/XqeLQg

Dapatkan kode Ikon dari: https://fontawesome.com/cheatsheet?from=io

Untuk ini, Anda hanya perlu menambahkan contentatribut dan font-familyatribut ke elemen yang diperlukan melalui: sebelum atau: setelah mana pun berlaku.

Misalnya: Saya ingin melampirkan ikon lampiran setelah semua aelemen di dalam posting saya. Jadi, pertama-tama saya perlu mencari apakah ikon tersebut ada dalam fontawesome. Seperti dalam kasus yang saya temukan di sini , yaitu fa fa-paperclip. Kemudian saya akan klik kanan ikon di sana, dan pergi ke ::beforeproperti semu untuk mengambil contenttag yang digunakannya, yang dalam kasus saya saya temukan \f0c6. Maka saya akan menggunakannya di css saya seperti ini:

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

Gunakan program Python berikut melalui baris perintah untuk membuat gambar png dari ikon Font-Awesome:

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