Użyj ikony Font Awesome jako treści CSS

278

Chcę użyć ikony Font Awesome jako treści CSS, tj.

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

Wiem, że nie mogę używać kodu HTML content, więc czy pozostały tylko obrazy?

sdvnksv
źródło
Z pamięci nie można wstrzykiwać HTML do DOM za pomocą atrybutu content. Po prostu stary tekst.
Mike Causer,

Odpowiedzi:

633

Aktualizacja dla FontAwesome 5 Dzięki Aurelien

Trzeba zmienić font-familyna Font Awesome 5 BrandsOR Font Awesome 5 Free, na podstawie rodzaju ikona próbujesz render. Nie zapomnij też zadeklarowaćfont-weight: 900;

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

Próbny

Możesz przeczytać resztę odpowiedzi poniżej, aby zrozumieć, jak to działa i poznać niektóre obejścia dotyczące odstępów między ikoną a tekstem.


FontAwesome 4 i poniżej

To zły sposób na użycie tego. Otwórz niesamowity arkusz stylów czcionki, przejdź do classczcionki, której chcesz użyć, powiedz fa-phone, skopiuj właściwość content do tej klasy razem z encją i użyj jej w następujący sposób:

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

Próbny

Tylko upewnij się, że jeśli chcesz kierować na określony atag, rozważ użycie classzamiast niego, aby uczynić go bardziej szczegółowym, na przykład:

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

Użycie powyższej metody spowoduje przyklejenie ikony do pozostałego tekstu, więc jeśli chcesz mieć trochę miejsca między nimi, zrób to display: inline-block;i użyj padding-right:

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

Rozszerzając tę ​​odpowiedź dalej, ponieważ wielu może wymagać zmiany ikony po najechaniu myszką, więc w tym celu możemy napisać osobny selektor i zasady :hoverdziałania:

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

Próbny

Teraz w powyższym przykładzie ikona przesuwa się ze względu na inny rozmiar i na pewno tego nie chcesz, więc możesz ustawić stałą widthdeklarację bazową, taką jak

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

Próbny

Pan Alien
źródło
Dzięki font-family: FontAwesome;niemu zmienia się także czcionka tagów zakotwiczenia. Jak sobie z tym poradzić?
Shubh
@Shubh dokładnie przeczytał kod, font-familyprzypuszczalnie powinien być wywołany na :beforepseudo, a nie na tagu zakotwiczonym
Pan Alien
Pomyślałem, że dodam tutaj, że możesz znaleźć specyfikację Unicode dla konkretnej ikony bez konieczności kopania do źródła. Wystarczy przejść do listy ikon na niesamowitej stronie czcionek i kliknąć żądaną ikonę. Zobaczysz wartość Unicode na stronie tuż pod próbkami ikony: fortawesome.github.io/Font-Awesome/icon/pencil-square-o
Allen Underwood
Ta lista CSS Unicode dla FontAwesome jest lepsza: astronautweb.co/snippet/font-awesome, ponieważ pokazuje poprawne contentkody do bezpośredniego kopiowania (tj. Bez zastanowienia). PS: Nadal zastanawiam się, dlaczego faceci FontAwesome nie umieszczają kodów zawartości na każdej stronie z ikonami ?!
Kai Noack,
25

Inne rozwiązanie bez konieczności ręcznego zmieniania znaków Unicode można znaleźć w artykule Tworzenie niesamowitej czcionki - Używanie ikon bez tagów i ( zrzeczenie się: Napisałem ten artykuł ).

Krótko mówiąc, możesz stworzyć nową klasę:

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

A następnie użyj go z dowolną ikoną, na przykład:

<a class="icon fa-car" href="#">This is a link</a>
dustinmoris
źródło
23

Jeśli masz dostęp do plików SCSS z niesamowitej czcionki, możesz użyć tego prostego rozwiązania:

.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;
}
ersefuril
źródło
3

Możesz użyć do tego Unicode w CSS. Jeśli używasz czcionki awesome 5, jest to składnia;

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

Możesz zobaczyć ich dokumentację tutaj .

Mahib
źródło
3

Powinieneś mieć grubość czcionki ustawioną na 900, aby Font Awesome 5 Free -rodzina czcionek działała.

Oto działający:

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

źródło
1

Jak napisano na stronie FontAwesome 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";
   }

W .login::before-> edytuj, content:'';aby dopasować swój Unicode.

Prusakow
źródło
1

Aktualizacja dla Font Awesome 5 za pomocą SCSS

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

  &:before {
    content: fa-content($fa-var-user);
  }
}
Kod przyjazny
źródło
0

Oto moje rozwiązanie webpack 4 + font niesamowite 5:

wtyczka webpack:

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

globalny styl css:

@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";
}
setec
źródło