Gunakan Font Awesome Ikon di CSS


305

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?


Mesin terbang dari font tidak dapat digunakan sebagai latar belakang. SVG, bagaimanapun, bisa
cimmanon

@cimmanon maukah Anda menjelaskan bagaimana itu bisa berlaku untuk font-awesome
BonsaiOak

@BonsaiOak Apa yang harus dijelaskan yang belum dijelaskan oleh jawaban yang dipilih? Jika Anda memiliki pertanyaan yang tidak dijawab dengan ini (atau pertanyaan lain tentang SO), maka ajukan pertanyaan baru.
cimmanon

@cimmanon minta maaf karena tidak jelas. Anda sepertinya menyiratkan bahwa mungkin untuk menggunakan ikon dari file font font-awesome.svg sebagai latar belakang. Namun, Anda tidak pernah mengatakan itu secara eksplisit sehingga saya tidak yakin.
BonsaiOak

1
@BonsaiOak Ya, Anda bisa menggunakan SVG sebagai gambar latar, seperti halnya Anda menggunakan gambar lainnya. Namun, saya belum benar-benar melihat FontAwesome SVG untuk memverifikasi bahwa itu dapat digunakan dengan cara ini.
cimmanon

Jawaban:


489

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).


63
Setara teks dari setiap ikon ada fortawesome.github.io/Font-Awesome/cheatsheet
Matthieu

61
Anda harus menghapus & # x dari awal dan; dari akhir. Nama font-family adalah FontAwesome
Matthieu

5
@ David, itu hanya teks, gunakan font-size.
JCM

6
untuk FontAwesome v5 yang perlu Anda gunakan .backspace:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f55a"; }
Digvijayad

5
Hanya catatan bahwa ini tampaknya tidak berfungsi dengan elemen Input (seperti tombol kirim) karena tampaknya tidak mendukung: sebelum atau: setelah.
Mir

70

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/


1
bekerja setelah saya menghapus posisi: absolut; di .element: sebelumnya, sekarang saya dapat menghiasi tautan saya dengan ikon font yang mengagumkan tetapi tetap menggunakan font khusus tautan
jethroo

daftar hebat nilai konten!
Anthony

1
Seperti dicatat dalam jawaban oleh @staabm, FontAwesome menyimpan daftar kode resmi untuk setiap mesin terbang: fontawesome.io/cheatsheet
alxndr

24

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.

Tangkapan layar Font-Awesome CSS File


22

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

jawaban terbaik, karena Anda hanya dapat menghapus tag <i> sebelumnya dari teks yang Anda inginkan dengan ikon dan ganti dengan ini. Dan ruang yang sama diberikan.
andygoestohollywood

7

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

6

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.


2

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>

8
"Tidak perlu menyematkan konten ke dalam CSS". Ya, dalam beberapa situasi itu diperlukan.
Stéphane Bruckert

2
Jika Anda tidak peduli dengan peningkatan progresif itu baik-baik saja, tetapi Anda harus benar-benar menjaga styling Anda di dalam file css bila memungkinkan.
Adam Carr

2

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


0

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 */
    }

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.