☰

Font Awesomeアイコンが機能しません。必要なファイルはすべて含めました [closed] 質問する

tag-icon • tag-icon html css font-awesome
Font Awesomeアイコンが機能しません。必要なファイルはすべて含めました [closed] 質問する

私はバージョンのFont Awesomeアイコンを使用しようとしています4.1.0私のウェブサイトでは機能していませんが、headページの で参照しています。

2つの方法を試してみました。

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

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

私が使用している CDN リンクは次のとおりです。<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>

ベストアンサー1

素晴らしいフォントアイコンを探している人のために、いくつかのアイデアを集めました。

  • 次のような CDN への正しいリンクを使用していることを確認してください。

    <link 
  href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" 
  rel="stylesheet"  type='text/css'>

  • ページで HTTPS を使用している場合、HTTPS を使用して font-awesome CSS にリンクしていますか (上記のリンク内の をhttp://に置き換えてください)。https://

  • AdBlock Plus または uBlock が有効になっていないことを再度確認してください。一部のアイコンがブロックされている可能性があります。

  • ブラウザのキャッシュをリセットします。(Chrome では、再読み込みボタンを長押しして、[ハード キャッシュ リセット] を選択します)

  • 使用する<span>または要素がフォントファミリーを使用していることを確認してください。たとえば、<i>FontAwesome

    <i class="fa-pencil" title="Edit"></i>

    しかし

    <i class="fa fa-pencil" title="Edit"></i>

    CSS に次のような内容が含まれている場合は機能しません。

    * {
  font-family: 'Josefin Sans', sans-serif !important;   
}

  • IE8 を使用している場合、HTML5 Shim を使用していますか?

  • これがうまくいかない場合は、さらにトラブルシューティングのアイデアFont Awesome Wiki で。

おすすめ記事