Font Awesome-Symbole in CSS verwenden

Question

Ich habe ein CSS, das wie folgt aussieht:

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

Ich möchte das Bild durch ein Symbol aus Font Awesome .

Ich sehe keine Möglichkeit, das Symbol in CSS als Hintergrundbild zu verwenden. Ist dies möglich zu tun, vorausgesetzt, die Font Awesome Stylesheets/Schriftarten werden vor meinem CSS geladen?

Answer 1

Ich bin ein bisschen zu spät zur Party gekommen. Ich möchte nur einen anderen Weg vorschlagen.

  button.calendar::before {
    content: '\f073';
    font-family: 'Font Awesome 5 Free';
    left: -4px;
    bottom: 4px;
    position: relative;
  }

position , left et bottom werden verwendet, um das Symbol auszurichten.

Manchmal werden font-weight: 600 oder höher hilft ebenfalls.

Answer 2

#content h2:before {
    content: "\f055";
    font-family: FontAwesome;
    left:0;
    position:absolute;
    top:0;
}

Beispiel Link: https://codepen.io/bungeedesign/pen/XqeLQg

Holen Sie sich den Icon-Code von: https://fontawesome.com/cheatsheet?from=io

Answer 3

Es ist nicht erforderlich, Inhalte in das CSS einzubetten. Sie können den Inhalt des Abzeichens in das fa-Element einfügen und dann das CSS für das Abzeichen anpassen. 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>

Answer 4

Alternativ kann man bei Verwendung von Sass die FA-Symbole "erweitern", um sie anzuzeigen:

.mytextwithicon:before {
  @extend .fas, .fa-angle-double-right;

  @extend .mr-2; // using bootstrap to add a small gap
                 // between the icon and the text.
}

Answer 5

Es scheint, dass die gegebenen Antworten nicht einen echten Hintergrund geben, da die fontawesome außerhalb des Blocks gerendert wird, die Sie den Hintergrund in wollen. Hier ist meine Lösung, um eine "echte" Hintergrund-Effekt haben:

html :

<div id="bloc" class="bg_ico_outer" style="">
    <i class="fa fa-bookmark-o bg_ico"></i>
    <div class='bloc_inner'>
        <h2>test fontawesome as background</h2>
    </div>
</div>

css :

.bg_ico {
    position: absolute;
    top: 0px;
    right: -10px;
    font-size: 17em;
    color: green;
    transform: rotate(25deg);
}

.bg_ico_outer{position: relative; overflow: hidden;}

#bloc{
    height: 200px;
    width:200px;
    background: blue;
    margin:50px auto;
}
.bloc_inner{
    position: absolute;
}
h2{color: white;}