Użyj czcionek Niesamowite ikony w CSS

Mam trochę CSS, który wygląda tak:

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

Chciałbym zastąpić obraz ikoną z Font Awesome .

Nie widzę zresztą użycia ikony w CSS jako obrazu tła. Czy można to zrobić, zakładając, że arkusze / czcionki Font Awesome są ładowane przed moim CSS?

Nie można używać tekstu jako tła, ale można użyć :beforealbo :afterpseudo klas, aby umieścić postać tekstową, gdzie chcesz, bez konieczności dodawania wszelkiego rodzaju bałagan dodatkową dopłatę.

Pamiętaj, aby ustawić position:relativefaktyczne opakowanie tekstu, aby pozycjonowanie działało.

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

EDYTOWAĆ:

Czcionka Awesome v5 używa innych nazw czcionek niż starsze wersje:

• W przypadku FontAwesome v5, wersja bezpłatna, użyj: font-family: "Font Awesome 5 Free"
• W przypadku FontAwesome v5, wersja Pro użyj: font-family: "Font Awesome 5 Pro"

Pamiętaj, że powinieneś również ustawić tę samą właściwość font-weight (wydaje się, że jest to 900).

Innym sposobem znalezienia nazwy czcionki jest kliknięcie prawym przyciskiem myszy niesamowitej ikony przykładowej czcionki na stronie i pobranie nazwy czcionki (w ten sam sposób można znaleźć kod ikony utf-8, ale pamiętaj, że możesz go znaleźć :before).

W odpowiedzi na powyższą odpowiedź z Diodeusa potrzebujesz font-family: FontAwesomereguły (zakładając, że @font-facereguła dla FontAwesome została już zadeklarowana w CSS). Następnie chodzi o to, aby wiedzieć, która wartość zawartości CSS odpowiada której ikonie.

Wymieniłem je wszystkie tutaj: http://astronautweb.co/snippet/font-awesome/

W rzeczywistości nawet font-awesomeCSS ma podobną strategię ustawiania swoich stylów ikon. Jeśli chcesz szybko uzyskać icon kod , sprawdź non-minified font-awesome.cssplik i tam są .... każda czcionka jest czysta.

Podsumowując wszystko powyżej, następująca klasa jest skuteczna

   .faArrowIcon {
        position:relative;
    }

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

Możesz wypróbować tę przykładową klasę. i znajdź treść ikony tutaj: 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";
    }

Aby użyć niesamowitej czcionki za pomocą css, wykonaj następujące czynności -

krok 1 - Dodaj czcionki FontAwesome w 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');
}

Krok - 2 Użyj poniższego css, aby zastosować czcionkę do elementu klasy 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;
}

Na koniec użyj klasy „ sorting_asc ”, aby zastosować css do żądanego znacznika / elementu HTML.

Nie ma potrzeby osadzania treści w CSS. Możesz umieścić treść znaczka wewnątrz elementu fa, a następnie dostosować css znaczka. 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>

Alternatywnie, jeśli używasz Sassa, możesz „rozszerzyć” ikony FA, ​​aby je wyświetlić:

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

Przykładowy link: https://codepen.io/bungeedesign/pen/XqeLQg

Uzyskaj kod ikony z: https://fontawesome.com/cheatsheet?from=io

W tym celu wystarczy dodać contentatrybut i font-familyatrybut do wymaganego elementu za pomocą: przed lub: po, jeśli dotyczy.

Na przykład: chciałem dołączyć ikonę załącznika po całym aelemencie w moim poście. Więc najpierw muszę sprawdzić, czy taka ikona istnieje w fontawesome. Podobnie jak w przypadku znalazłem go tutaj , tj fa fa-paperclip. Następnie kliknąłem tam ikonę prawym przyciskiem myszy i przeszedłem do ::beforepseudo-właściwości, aby pobrać contenttag, którego używa, co w moim przypadku jest \f0c6. Następnie użyłbym tego w moim css w następujący sposób:

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

Użyj następującego programu w języku Python za pomocą wiersza polecenia, aby utworzyć obrazy png z ikon Font-Awesome:

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