FontAwesome is no more working

  • Resolved taryarlwin

    (@taryarlwin)


    8 years, 4 months ago

    I have used FontAwesome for search box but it is not working anymore. My css is as follows.

    /* Add a magnifying glass in front of search box*/
    .my-nav-menu-search .search-form:before {
    font-family: ‘FontAwesome’;
    content: ‘\f002’;
    position: absolute;
    font-size: 19px;
    font-weight: normal;
    top: 5px;
    left: 5px;
    }

    I read about FontAwesome version upgrade and perhaps I need to add following code at somewhere. I am not sure where should I add.

    <head>
    <!–core first + styles last–>
    <link href=”/static/fontawesome/fontawesome.css” rel=”stylesheet”>
    <link href=”/static/fontawesome/fa-brands.css” rel=”stylesheet”>
    <link href=”/static/fontawesome/fa-regular.css” rel=”stylesheet”>
    <link href=”/static/fontawesome/fa-solid.css” rel=”stylesheet”>
    </head>
    <body>
    <!–user icon in two different styles–>
    <i class=”fas fa-user”></i>
    <i class=”far fa-user”></i>
    <!–brand icon–>
    <i class=”fab fa-github-square”></i>
    </body>

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Rocco Aliberti

    (@d4z_c0nf)

    8 years, 4 months ago

    Hi there,
    font awesome CSS is already enqueued by the theme as long as the option in
    Appearance -> Customize -> Advanced options -> Front end icons (Font Awesome) -> Load Font Awesome resources

    is active.
    And on your site it is.

    The thing is that Font Awesome 5 changed the way the CSS is defined, so you have to change your custom CSS to make it work with the FA latest version.
    In particular, in your code above:

    /* Add a magnifying glass in front of search box*/
.my-nav-menu-search .search-form:before {
font-family: 'FontAwesome';
content: '\f002';
position: absolute;
font-size: 19px;
font-weight: normal;
top: 5px;
left: 5px;
}

    this: font-family: 'FontAwesome';
    must become: font-family: 'FontAwesome 5 Free';

    and the font-weight: font-weight: normal;
    must become: font-weight: 900;

    as the search icon in Font Awesome 5 (free) exists only in the Solid format, which is rendered with that font-weight only.
    https://fontawesome.com/icons/search?style=solid

    Hope this helps.

    Thread Starter taryarlwin

    (@taryarlwin)

    8 years, 4 months ago

    Thank you for your help Rocco. But still couldn’t see the search icon. I have no idea where did it go wrong. Already try clear cache and browse too.

    Please check the result here: https://demo.tdstech.com/

    Edited Code:
    /* Add a magnifying glass in front of search box*/
    .my-nav-menu-search .search-form:before {
    font-family: ‘FontAwesome 5 Free’;
    content: ‘\f002’;
    position: absolute;
    font-size: 19px;
    font-weight: 900;
    top: 5px;
    left: 5px;
    }

    Denzel Chia

    (@denzel_chia)

    8 years, 4 months ago

    Hi,

    Use the following for font family

    font-family:'Font Awesome\ 5 Free';

    I am able to get it to work on your website, by applying it via my developer tools.

    View post on imgur.com

    Thank you

    Thread Starter taryarlwin

    (@taryarlwin)

    8 years, 4 months ago

    Great! Work like a charm. Thank you Denzel and Rocco.

    • This reply was modified 8 years, 4 months ago by taryarlwin.
    Rocco Aliberti

    (@d4z_c0nf)

    8 years, 4 months ago

    Right,
    thanks Denzel.
    My mistake, was not
    font-family: 'FontAwesome 5 Free';
    but
    font-family: 'Font Awesome 5 Free'; (I missed a space :/)
    or
    font-family: 'Font Awesome\ 5 Free'; (as Denzel said)

    😀

    Denzel Chia

    (@denzel_chia)

    8 years, 4 months ago

    Hi,

    I am glad to be of some help. 🙂
    Thank you!

    unwirklich

    (@unwirklich)

    8 years, 3 months ago

    I’m having this same issue on two sites (using identical code)
    lifewithgremlins.com and Ketosee.com

    
/* Add a magnifying glass in front of search box*/
.my-nav-menu-search .search-form:before {
font-family: 'Font Awesome\ 5 Free';
content: '\f002';
position: absolute;
font-size: 19px;
font-weight: 900;
top: 5px;
left: 5px;
}

    I have double checked and Font Awesome is enabled in advanced settings. Where am I going wrong?

    • This reply was modified 8 years, 3 months ago by unwirklich.
    • This reply was modified 8 years, 3 months ago by unwirklich.
    • This reply was modified 8 years, 3 months ago by unwirklich.
    unwirklich

    (@unwirklich)

    8 years, 3 months ago

    I randomly thought to try it the ‘Font Awesome 5 Free’ way instead of ‘Font Awesome\ 5 Free’ and it works…which is odd, before it wouldn’t let me save without the \ though I can’t remember what the error said. Either way, problem solved 🙂

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘FontAwesome is no more working’ is closed to new replies.