CODEWITHSUNDEEP
htmlfont-awesome
Oktavianus Misro
Oktavianus Misro

Reputation: 5

Font awesome icons don't appear

I am using font awesome to add social media button on my website. I have follow the rule but the icon doesn't appear this is the head of my website

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>oktavianusm</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet" type="text/css">
<link href="fontawesome-free-5.3.1-web/css/fontawesome.min.css" rel="stylesheet" type="text/css">

and this is how I managed it in the body of my html 

<div class="social-media">
        <i class="fab fa-facebook-square"></i>
        <i class="fab fa-twitter-square"></i>
        <i class="fab fa-linkedin-square"></i>
        <i class="fab fa-google-plus-square"></i>
    </div>

and this is what happen when I test my code in the browser

this is what happenwhen I do the inspect element and point the cursor on the code

Upvotes: 0

Views: 1023

Answers (2)

Christopher Vickers
Christopher Vickers

Reputation: 1953

I had the same problem. The link was intermittently not loading into the DOM. There was no obvious reason for it, so to get round it I added the following code to manually add the link. jQuery is used to add a link into the head. If it already exists then you just get a duplicate.

<!-- Font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Font awesome force load as was not loading -->
<script>
    $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">');
</script>

I know that this is not a pretty solution but it does work. I should mention that this link is for 4.7 You need to change it to whatever version you want.

Upvotes: 0

Howard Parr
Howard Parr

Reputation: 147

Just checked the Font Awesome website at: https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css.

Here is the correct stylesheet link:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" 
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" 
crossorigin="anonymous">

Was looking at using these on my web site.

Upvotes: 1

Related Questions