2

I use fontawesome in almost all the projects I work. But this time I'm getting the icons displayed as squares. I also tried almost all the solutions listed on stackoverflow and nothing seems to work for my case.I guess something is preventing me from displaying fontawesome. This is happening not only in hosted case but in local too. I verified this file is being loaded correctly in the browser and has appropriate headers

I even tried this solution from [codepen]

Its result was yes but still icons are displayed as squares. What could be the problem?

This is my head part

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Habitath</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Habitath a online coach hiring website" />
<meta name="keywords" content="habitath, ecosystem, online coach website" />
<meta name="author" content="Habitath" />

<link rel="shortcut icon" href="img/favicon.png" />
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css" />
<!-- Magnific Popup -->
<link rel="stylesheet" href="css/magnific-popup.css" />
<!-- Bootstrap  -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/form.css" />
<link href="https://fonts.googleapis.com/css?family=Squada+One" rel="stylesheet">


</head>
Gowtham
  • 3,198
  • 2
  • 19
  • 30

2 Answers2

1

you added font files to the project (like fontawesome-webfont.woff etc)? not only css

Сергей Дрозд
  • 11
  • 2
0

ul {
  margin: 0;
  padding: 0;
  }
ul li {
  list-style: none;
  float: left;
  margin-left: 5px;
  }
ul li a {
  text-decoration: none;
  padding: 8px 12px;
  color: #FFF;
  background: #545454;
  font-size: 20px;
  border-radius: 50%;
  transition: color 0.3s ease-in-out;
  -webkit-transition: color 0.3s ease-in-out;
  }
ul li a:hover {
  color: #C86565;
  }
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Habitath</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Habitath a online coach hiring website" />
<meta name="keywords" content="habitath, ecosystem, online coach website" />
<meta name="author" content="Habitath" />

<link rel="shortcut icon" href="img/favicon.png" />
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css" />
<!-- Magnific Popup -->
<link rel="stylesheet" href="css/magnific-popup.css" />
<!-- Bootstrap  -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/form.css" />
<link href="https://fonts.googleapis.com/css?family=Squada+One" rel="stylesheet">
</head>

<body>
 <ul>
   <li><a href="#"><i class="fa fa-facebook"></i></a></li>
   <li><a href="#"><i class="fa fa-twitter"></i></a></li>
   <li><a href="#"><i class="fa fa-github"></i></a></li>
   </ul>
 </body>
hamidrun
  • 25
  • 6
  • can you please explain what difference does styling list elements and anchor tags make in fontawesome icons? – Gowtham Sep 15 '16 at 07:17