Font Awesome simgesini CSS içeriği olarak kullanma


279

Font Awesome simgesini CSS içeriği olarak kullanmak istiyorum, yani,

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

HTML kodunu kullanamayacağımı biliyorum content, bu yüzden sadece resim kaldı mı?


Bellekten, content özelliğini kullanarak DOM'ye HTML enjekte edemezsiniz. Sadece düz eski metin.
Mike Causer

Yanıtlar:


634

FontAwesome için 5 güncelleyin sayesinde Aurelien

Sen değiştirmeniz gerekir font-familyiçin Font Awesome 5 BrandsOR Font Awesome 5 Freesen işlemek çalıştığınız simgesi türüne göre. Ayrıca, beyan etmeyi unutmayınfont-weight: 900;

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

gösteri

Nasıl çalıştığını anlamak ve simge ile metin arasındaki boşluk için bazı geçici çözümleri öğrenmek için aşağıdaki cevabın geri kalanını okuyabilirsiniz.


FontAwesome 4 ve altı

Bunu kullanmanın yanlış yolu bu. Yazı tipi müthiş stil sayfasını açın, classkullanmak istediğiniz yazı tipinin diyelim fa-phone, söz konusu sınıfın altındaki content özelliğini varlık ile kopyalayın ve şöyle kullanın:

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

gösteri

Belirli bir aetiketi hedeflemek istiyorsanız, classbunun yerine daha belirgin hale getirmek için bir bunun yerine kullanmayı düşünün :

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

Yukarıdaki yolu kullanmak, simgeyi kalan metninize yapıştırır, bu nedenle ikisi arasında biraz boşluk istiyorsanız, bunu yapın display: inline-block;ve biraz kullanın padding-right:

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

Birçok kişinin fareyle üzerine gelindiğinde bir simgeyi değiştirme gereksinimi olabileceğinden, bu yanıtı daha da genişletmek için ayrı bir seçici ve :hovereylem kuralları yazabiliriz :

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

gösteri

Şimdi yukarıdaki örnekte, simge farklı boyut nedeniyle dürtüyor ve kesinlikle bunu istemiyorsunuz, böylece widthtemel bildirimde olduğu gibi bir sabit ayarlayabilirsiniz

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

gösteri



Bununla font-family: FontAwesome;birlikte çapa etiketleri için yazı tipini de değiştirir. Bunu nasıl halledebiliriz?
Shubh

@Shubh kodu dikkatle okuyun, sözde ve çapa etiketi font-familyüzerinde çağrılması gerekiyor:before
Bay Alien

Buraya, kaynağa girmek zorunda kalmadan belirli bir simgenin unicode özelliğini bulabileceğinizi düşündüm. Harika yazı tipi web sitesindeki simgeler listesine gidin ve istediğiniz simgeyi tıklayın. Unicode değerini sayfada simgenin örneklerinin hemen altında göreceksiniz
Allen Underwood

FontAwesome için bu CSS Unicode listesi daha iyidir: astronautweb.co/snippet/font-awesome, çünkü contentdoğrudan kopyalama için doğru kodları gösterir (örn. Beyinsiz). Not: Hala FontAwesome'lerin neden içerik kodlarını her ikon sayfasına koymadıklarını merak ediyorum ?!
Kai Noack

25

Unicode karakterlerle elle uğraşmak zorunda kalmadan başka bir çözüm, Font Awesome müthiş yapma - i-etiketleri olmadan simgeleri kullanma ( feragatname: Bu makaleyi yazdım ) 'da bulunabilir.

Özetle, böyle yeni bir sınıf oluşturabilirsiniz:

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

Ardından herhangi bir simgeyle kullanın, örneğin:

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

23

Font-awesome öğesinden SCSS dosyalarına erişiminiz varsa, bu basit çözümü kullanabilirsiniz:

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


3

Bunun için unicode'u CSS'de kullanabilirsiniz. Awesome 5 yazı tipini kullanıyorsanız, bu sözdizimidir;

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

Belgelerini burada görebilirsiniz .


3

Font Awesome 5 Ücretsiz font ailesinin çalışması için font ağırlığını 900 olarak ayarlamanız gerekir .

Bu çalışanı:

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

1

FontAwesome web sitesinde söylediği gibi FontAwesome =>

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

In .login::before-> düzenle content:'';senin unicode uygun.


1

SCSS kullanarak Font Awesome 5 Güncelleştirmesi

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

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

0

İşte benim webpack 4 + font müthiş 5 çözümü:

webpack eklentisi:

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

küresel css tarzı:

@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";
}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.