CODEWITHSUNDEEP
htmlcssfont-awesome
Sidney Sousa
Sidney Sousa

Reputation: 3584

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?

Upvotes: 5

Views: 69496

Answers (4)

m_kos
m_kos

Reputation: 1809

If you are planning to use CDN just add one line it to your css file (i.e. main.css) indicating from where the font style should be imported

@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

source of the link used in the example above: https://www.bootstrapcdn.com/fontawesome/

Upvotes: 8

Elton Sousa
Elton Sousa

Reputation: 421

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.

Upvotes: 1

Sayed Rafeeq
Sayed Rafeeq

Reputation: 1219

You can add font-awesome css file in your "main.css" file

@import url('/font-awesome-4.6.3/css/font-awesome.min.css');

Upvotes: 11

Mukesh Ram
Mukesh Ram

Reputation: 6328

Try to call form font-awesome like this:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">

Or if you try from your site folder then download font-awesome and add fonts into your fonts folder and add font-awesome css into css folder then call it like this:

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

Upvotes: 2

Related Questions