FAグリフィコンのみ正方形で表示

私はグリフィンをしていても私には表示されない理由をインターネットで検索しています。彼らは小さな正方形 "[]"としてのみ表示されます。FAグリフィコンのみ正方形で表示

私は正しいパスにリンクしていることを確認しました。他のフォーラムの投稿のように私のプロジェクトのすべてのファイルを持っていると私は誰かのようにフォントファミリを変更しようとしましたが、何も変わることはありません。

何か不足していますか？誰かが簡単に私に修正を説明することができますか？私はHTMLとCSSにはまだまだ新しく、とても簡単に混乱します！

.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>

出典

2016-12-01 Cydo Entis

リンクbootstrap.js 私のフォルダはとても似てhttp://getbootstrap.com/ –

これは、パスの問題のように見えます。 .cssすべてのファイルが単一のフォルダまたは異なるフォルダに保存されていますか？それらが別のフォルダに格納されている場合は、.cssファイルのフォルダ構造をリストしてください。

また、BootstrapCDNを使用して、cssファイルを直接リンクする代わりの方法を指摘したいと思います。

例えば、私のために働い以下：

.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>

出典

2016-12-01 02:21:55 learningloop

からダウンロードすることができます：メインProjectフォルダには、bootstrap.css、styles.css、index.html、およびmy 2イメージが含まれています。それから私はそれにすべてのフォント素晴らしいファイルを別々のCSSフォルダがあります。 –

@CydoEntisもしあなたがlinuxファイルシステムを使用していて、フォルダ名が 'css'ではなく' CSS'であれば、href = "css/font-awesome.min.css" 'をhref =" CSS/font-awesome.min.css "'とチェックしてください。 – learningloop

FAグリフィコンのみ正方形で表示

答えて

関連する問題