CODEWITHSUNDEEP
htmlcssfont-awesomeglyphicons
Cydo Entis
Cydo Entis

Reputation: 46

FA Glyphicon Only Show As Squares

I have searched all over the internet searching for answers to why no matter what I do glyphicons just won't show up for me. They only show as a little square "[]".

I have made sure that I am linked to the correct path. and have all the files in my project like the other forum posts have said and I even tried to change the font-family like someone suggest but nothing changes.

Am I missing something? Can someone explain the fix to me in the simplest of terms? I am very new to HTML and CSS still and get confused quite easily!

.main{
  overflow: auto;
  background: url(portal.png), black;
  max-width: 100%;
  min-height: 900px;
  background-size: cover;
  background-position: center;
}

.main-nav{
  text-align: right;
  margin: 50px 50px 0 0;
}

.main-nav li{
  display: inline;
  text-align: center;
  padding: 20px;
  font-size: 22px;
}

.main-nav li a{
  color: #A8F766;
  text-decoration: none;
}

.main-nav li a:hover{
  color: #fff;
  text-decoration: none;
  border-bottom: 2px #A8F766 solid;
}

.main-text h1{
  text-align: center;
  margin-top: 150px;
  color: #fff;
  font-size: 70px;
}

.fa-bath{
  font-size: 90px;
  color: green;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Practice</title>
    <link href="bootstrap.css" rel="stylesheet" type="text/css">
    <link href="styles.css" rel="stylesheet" type="text/css">
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">

  </head>

  <body>
    <div class="main">
      <nav>
        <ul class="main-nav">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>

      <div class="main-text">
        <h1>Placeholder.<i class="fa fa-gamepad"></i><br>Placeholder.<br>Placeholder.</h1>
      </div>
    </div>

  </body>
</html>

Upvotes: 0

Views: 61

Answers (1)

bprasanna
bprasanna

Reputation: 2453

This looks like path issue. Does all your .css files stored in single folder or different folders? If they are stored in different folders can you please list the folder structure for .css files?

Also, just wanted to point out an alternative approach using BootstrapCDN to directly link the css file.

For example, following worked for me:

.fa-gamepad {
  color:blue;
}
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
   <h1>Game pad</h1>  
   <i class="fa fa-gamepad fa-5x"></i>
</body>

Upvotes: 1

Related Questions