CSS'de Harika Yazı Tipi Simgeleri Kullanma

Şuna benzeyen bazı CSS var:

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

Resmi Font Awesome'deki bir simgeyle değiştirmek istiyorum .

Yine de CSS'deki simgeyi arka plan görüntüsü olarak kullanmıyorum. Font Awesome stil sayfalarının / yazı tiplerinin CSS'imden önce yüklendiği varsayılabilir mi?

Metni arka plan görüntüsü olarak kullanamazsınız, ancak her tür dağınık ekstra işaretleme eklemek zorunda kalmadan istediğiniz yere bir metin karakteri yerleştirmek için :beforeveya :aftersözde sınıfları kullanabilirsiniz.

position:relativeKonumlandırmanın çalışması için gerçek metin sarma makinenizi ayarladığınızdan emin olun .

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

DÜZENLE:

Font Awesome v5, eski sürümlerden başka yazı tipi adları kullanır:

• FontAwesome v5, Ücretsiz Sürüm için şunları kullanın: font-family: "Font Awesome 5 Free"
• FontAwesome v5, Pro Sürümü için şunu kullanın: font-family: "Font Awesome 5 Pro"

Aynı font ağırlığı özelliğini de ayarlamanız gerektiğini unutmayın (900 gibi görünüyor).

Yazı tipi adını bulmanın başka bir yolu, sayfanızdaki örnek bir yazı tipi müthiş simgesine sağ tıklamak ve yazı tipi adını almaktır (utf-8 simge kodunun bulunabileceği gibi, ancak bulabileceğinizi unutmayın :before).

Yukarıdaki Diodeus'un cevabına ek olarak, font-family: FontAwesomekurala ihtiyacınız var ( @font-faceCSS'nizde zaten belirtilen FontAwesome kuralına sahip olduğunuzu varsayarak ). Sonra hangi CSS içerik değerinin hangi simgeye karşılık geldiğini bilmek önemlidir.

Hepsini burada listeledim: http://astronautweb.co/snippet/font-awesome/

Aslında font-awesomeCSS bile simge stillerini ayarlamak için benzer bir stratejiye sahiptir. icon Kodun hızlı bir şekilde tutulmasını istiyorsanız , non-minified font-awesome.cssdosyayı kontrol edin ve orada ... her yazı tipi saflığında.

Yukarıdaki her şeyi birleştiren, aşağıda iyi sonuç veren son sınıf

   .faArrowIcon {
        position:relative;
    }

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

Bu örnek sınıfı deneyebilirsiniz. ve simge içeriğini burada bulabilirsiniz: 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";
    }

Css kullanarak awesome yazı tipini kullanmak için aşağıdaki adımları izleyin -

adım 1 - CSS'ye FontAwesome Fontları Ekleme

/*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');
}

Adım - 2 HTML'nin sınıf öğesine yazı tipi uygulamak için aşağıdaki css kullanın

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

Son olarak, css'i istenen HTML etiketine / öğesine uygulamak için " sorting_asc " sınıfını kullanın.

İçeriği CSS'ye gömmeye gerek yok. Rozet içeriğini fa öğesinin içine koyabilir, ardından rozet css'sini ayarlayabilirsiniz. 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>

Alternatif olarak, Sass kullanıyorsanız, FA simgelerini görüntülemek için "genişletilebilir":

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

Örnek Bağlantı: https://codepen.io/bungeedesign/pen/XqeLQg

Simge kodunu şuradan alın: https://fontawesome.com/cheatsheet?from=io

Bunun için, gerekli öğeye contentöznitelik ve font-familyöznitelik eklemeniz gerekir : önce veya: sonra mümkün olduğunda.

Örneğin: Yazımın içindeki tüm öğeden sonra bir ek simgesi eklemek istedim a. Yani, önce böyle bir simge fontawesome içinde olup olmadığını aramak gerekir. Burada bulduğum gibi , yani fa fa-paperclip. Sonra simgeyi sağ tıklayıp kullandığı etiketi ::beforealmak için sözde özelliğe giderdim, contentbenim durumumda buldum \f0c6. Sonra css benim böyle kullanmak istiyorum:

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

Font-Awesome simgelerinden png görüntüleri oluşturmak için komut satırında aşağıdaki Python programını kullanın:

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