Search code examples
htmlcssfont-awesome

How to add font awesome in CSS


I am trying to add a an icon from font awesome but for some reason it does not appear when I load the page. Below is my html code in which I attempted to add the font awesome in different ways.

<html lang="en">
    <head>
        <title>Media Queries</title>
        <meta name="viewport" content="width=device-width, initial=scale1.0">  
        <link rel="stylesheet" href="main.css">
        <link href='https://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">      
    </head>
    <body> 
        <i class="fa fa-car" aria-hidden="true"></i>
        <h1>
            <i class="fa fa-car" aria-hidden="true"></i>Dummy Text
        </h1>
    </body>
</html>

Is there anything that am missing in the code?


Solution

  • What you put in your link is the name of your folder.You should put the name of the file instead(font-awesome)

    On the font-awesome folder look for the file called font-awesome,copy and paste on your browser text field so that you can see the correct path. Copy that path and paste in your link like this:

        <link rel="stylesheet" href="font-awesome/css/font-awesome.css">
    

    Just check the path correctly cause I see no other mistake. let me know if it does not work.