发表新帖
发表新帖

Font Awesome 5 font-family issue

前端 未结
关注
16 2758
深忆病人
深忆病人 2020-12-12 14:31

I integrated Font Awesome 5 in a project with bootstrap 4. When I recall a font via CSS it does not work. with Font Awesome 4 the code was as follows:

#mainN
相关标签:
16条回答
  • 灰色年华
    2020-12-12 14:42

    Using the fontawesome-all.css file: Changing the "Brands" font-family from "Font Awesome 5 Free" to "Font Awesome 5 Brands" fixed the issues I was having.

    I can't take all of the credit - I fixed my own local issue right before looking at the CDN version: https://use.fontawesome.com/releases/v5.0.6/css/all.css

    They've got the issue sorted out on the CDN as well.

     @font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: normal;
    src: url("../webfonts/fa-brands-400.eot");
    src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

    .fab {
    font-family: 'Font Awesome 5 Brands'; }
    @font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: 400;
    src: url("../webfonts/fa-regular-400.eot");
  src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

    0 讨论(0)
  • 北海茫月
    2020-12-12 14:45

    I had to set searchPseudoElements to to true to get it working in Angular5.

    import fontawesome from '@fortawesome/fontawesome';
...
fontawesome.config.searchPseudoElements = true;
...
content: "\f12a";
font-family: 'Font Awesome 5 Solid';
    0 讨论(0)
  • 慢半拍i
    2020-12-12 14:46

    IF it's still not working for you, I had forgotten to add the fa-ul class onto the parent (UL) element:

    <ul class="fa-ul">

    Together with the 2 bits of advice provided already by others:

    a) font-family: 'Font Awesome\ 5 Free';
b) font-weight: 900;

    solved it for me.

    FWIW, the include in my <head> tags is just:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />

    And I am using this with React and Preact. No need for any special React npm installs or components.

    0 讨论(0)
  • 余生分开走
    2020-12-12 14:48

    I didn't want to use the 'all' version, so searched the 'fontawesome-all.min.css' file (previously included in the header) for 'family' tag and found at the end a declaration @font-face{font-family:**Font Awesome\ 5 Free**;font-style:normal;

    So, in the stylesheet for an element where I wanted to use the content: "\f0c8"; code, I've added (or changed to) font-family: Font Awesome\ 5 Free; and it worked.

    .frb input[type="checkbox"] ~ label:before {
    font-family: Font Awesome\ 5 Free;
    content: "\f0c8";
    font-weight: 900;
    position: absolute;
}
    0 讨论(0)
  • 不知归路
    2020-12-12 14:48

    the solution is call it like normal font:

    @font-face {
font-family: "Font Awesome 5 Free-Regular-400";
src: url(../fonts/Font%20Awesome%205%20Free-Regular-400.otf) format("opentype");}
    0 讨论(0)
  • 别那么骄傲
    2020-12-12 14:49

    Your Unicode is wrong f107

    a::after {
  content: "\f007";
  font-family: 'Font Awesome\ 5 Free';
}
    <link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
<a>User</a>
<i class="fas fa-shopping-basket"></i>

    Or in other case, font-weight: 900; will save you. Some icons in font awesome 5 not working without font-weight: 900;.

    a::after {
  content: "\f007";
  font-family: 'Font Awesome\ 5 Free';
  font-weight: 900;
}
    0 讨论(0)
 看不清?
提交回复
热议问题