Використовуйте значки шрифту Awesome у CSS

У мене є CSS, який виглядає приблизно так:

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

Я хотів би замінити зображення значком від Font Awesome .

Я не бачу в будь-якому випадку використовувати значок у CSS як фонове зображення. Чи можливо це зробити, припускаючи, що таблиці та шрифти Font Awesome завантажуються перед моїм CSS?

Ви не можете використовувати текст як фонове зображення, але ви можете використовувати класи :beforeабо :afterпсевдо, щоб розмістити текстовий символ там, де вам це потрібно, без необхідності додавати всі види брудних додаткових націнок.

Не забудьте встановити position:relativeфактичну обгортку тексту для позиціонування.

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

Редагувати:

Шрифт Awesome v5 використовує інші назви шрифтів, ніж старіші версії:

• Для безкоштовної версії FontAwesome v5 використовуйте: font-family: "Font Awesome 5 Free"
• Для версії FontAwesome v5, Pro, використовуйте: font-family: "Font Awesome 5 Pro"

Зверніть увагу, що ви також повинні встановити те саме властивість ваги шрифту (здається, 900).

Ще один спосіб знайти ім'я шрифту - це клацнути правою кнопкою миші на зразковому значку шрифту на вашій сторінці та отримати ім'я шрифту (так само, як можна знайти код значка utf-8, але зауважте, що ви можете дізнатися його :before).

Надалі вище відповідь від Діода, вам потрібне font-family: FontAwesomeправило (якщо припустити, що @font-faceправило для FontAwesome оголошено вже у вашому CSS). Тоді варто дізнатися, яке значення вмісту CSS відповідає якому значку.

Я перерахував їх тут: http://astronautweb.co/snippet/font-awesome/

Насправді навіть font-awesomeCSS має подібну стратегію встановлення стилів їх значків. Якщо ви хочете швидко затримати icon код , перевірте non-minified font-awesome.cssфайл і там вони є .... кожен шрифт у своїй чистоті.

Консолідуючи все вище, далі - заключний клас, який добре працює

   .faArrowIcon {
        position:relative;
    }

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

Ви можете спробувати цей приклад класу. і знайдіть вміст піктограм тут: 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, виконайте наведені нижче кроки -

крок 1 - Додайте шрифти FontAwesome в 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');
}

Крок - 2 Використовуйте нижче css, щоб застосувати шрифт до елемента класу 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;
}

І, нарешті, використовуйте клас " sorting_asc ", щоб застосувати css до потрібного тегу / елемента HTML.

Не потрібно вставляти вміст у CSS. Ви можете помістити вміст значка всередині елемента fa, а потім відрегулювати 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>

Крім того, якщо ви використовуєте Sass, можна "розширити" піктограми FA для їх відображення:

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

Приклад посилання: https://codepen.io/bungeedesign/pen/XqeLQg

Отримайте код іконки з: https://fontawesome.com/cheatsheet?from=io

Для цього вам просто потрібно додати contentатрибут та font-familyатрибут до необхідного елемента через: до або: після, де це можливо.

Наприклад: я хотів вкласти значок вкладеного файлу після всього aелемента всередині моєї публікації. Отже, спершу мені потрібно шукати, чи існує така піктограма у виразному вигляді. Як у випадку, коли я його знайшов тут , тобто fa fa-paperclip. Тоді я би клацнув правою кнопкою миші там і перейшов до ::beforeвластивості псевдо, щоб отримати contentтег, який він використовує, і в моєму випадку я виявив це \f0c6. Тоді я б використав це у своєму css так:

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

Використовуйте наступну програму Python за допомогою командного рядка для створення PNG-зображень із значків Font-Awesome:

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