BinaryDevelop
  1. ホーム
  2. html

[解決済み] FontAwesomeのアイコンが表示されないのですが、なぜですか？[クローズド］

2022-03-04 22:54:01

質問

最近、ウェブサイトを開発していて、フォントがすごいアイコンを使おうとしています。

問題は、それらが表示されないことです。

以下はそのHTMLです。 

<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>

または 

<li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>

スタイルシートの参照はheadに入れました。

なぜ表示されないのかわからない。

以下は参考です。 

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

以下はhtmlの全文です。 

<head>
    <meta charset="UTF-8">
    <title>Retrica</title>
    <link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    
    <link href="style/normalize.css" rel="stylesheet" type="text/css">
    <link href="style/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="style/main.css" rel="stylesheet" type="text/css">
</head>

<body>
    <header class="top-header">
        <div class="container"><!-- Start Container -->
            <div class="row"><!-- Start Row -->
                <div class="span3"><!-- Start Span3 -->
                    <div class="logo"><img src="img/[email protected]" alt="" width="67px" height="13,5px"></div>
                </div><!-- End Span3 -->
                <div class="span9"><!-- Start Span9 -->
                    <nav class="main-nav">  <!-- Start Nav -->
                    
                        <a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>
                        <ul class="nav-ul"> <!-- Start Unordered List -->
                            <li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>
                            <li><a href="#"><span class="fa fa-mobile-phone fa-2x"></span> Contact Us</a></li>
                            
                        </ul> <!-- End Unordered List -->
                    </nav><!-- End Nav -->
                </div><!-- End Span9 -->
            </div><!-- End Row -->
        </div><!-- End Container -->
    </header>
    
    <section>

        <a href="#" class="btncta">Register Now</a>
    </section>

</body>

解決方法は？

参考資料の下に、こんなのがありますね。 

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

具体的には href= の部分があります。

しかし、あなたのフルhtmlの下はこうなっています。 

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

を置き換えてみましたか？ src= を href= をフルHTMLで書くとこうなりますか？ 

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

私の場合、動作します。 http://codepen.io/TheNathanG/pen/xbyFg

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します