フォントの前に素晴らしいフォントを表示する

Question

「Like」の前に同じアイコン/ボタンを追加したいと思いますが、フォントを試しましたが、「i」タグはイタリック体の「Like」というテキストのみを表示します。スニペットはここで動作しますが、それは私が私のエディタ上でそれを書くとき、私はまだこれは私がCDNのために使用するリンクです

を動作していない、IEとChromeの両方でそれを試して動作しないでしょうが。

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

これはHTMLコードです：

<div class="row"> 
    <div class="col-xs-4"><button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up">Like</i></button></div> 
    <div class="col-xs-4"><button class="btn btn-block btn-info">Info</button></div> 
    <div class="col-xs-4"><button class="btn btn-block btn-danger">Delete</button></div> 

</div> 

デモ：

h2 { 
 
    font-family: Lobster, Monospace; 
 
} 
 

 
.thick-green-border { 
 
    border-color: green; 
 
    border-width: 10px; 
 
    border-style: solid; 
 
    border-radius: 50%; 
 
}

<div class="fluid-container"> 
 

 
    <div class="row"> 
 

 
    <div class="col-md-8"> 
 
     <h2 class="red-text text-center">CatPhotoApp</h2> 
 
    </div> 
 

 
    <div class="col-md-4"> 
 
     <a href="https://www.google.co.uk/?gws_rd=ssl"><img class="img-responsive thick-green-border" src="https://s3.amazonaws.com/freecodecamp/relaxing-cat.jpg"></a> 
 
    </div> 
 

 
    </div> 
 

 

 

 
    <img src="https://s3.amazonaws.com/freecodecamp/running-cats.jpg" class="img-responsive"> 
 

 

 
    <div class="row"> 
 
    <div class="col-xs-4"><button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up">Like</i></button></div> 
 
    <div class="col-xs-4"><button class="btn btn-block btn-info">Info</button></div> 
 
    <div class="col-xs-4"><button class="btn btn-block btn-danger">Delete</button></div> 
 

 
    </div> 
 

 

 
    <p>Things cats <span class="text-danger">love</span>:</p> 
 
    <ul> 
 
    <li>cat nip</li> 
 
    <li>laser pointers</li> 
 
    <li>lasagna</li> 
 
    </ul> 
 
    <p>Top 3 things cats hate:</p> 
 
    <ol> 
 
    <li>flea treatment</li> 
 
    <li>thunder</li> 
 
    <li>other cats</li> 
 
    </ol> 
 
    <form action="/submit-cat-photo"> 
 
    <label><input type="radio" name="indoor-outdoor"> Indoor</label> 
 
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label> 
 
    <label><input type="checkbox" name="personality"> Loving</label> 
 
    <label><input type="checkbox" name="personality"> Lazy</label> 
 
    <label><input type="checkbox" name="personality"> Crazy</label> 
 
    <input type="text" placeholder="cat photo URL" required> 
 
    <button type="submit">Submit</button> 
 
    </form>

Answer 1

このページは、ローカルで行うと思われるfile:///...とは異なります。

あなたのCDNはプロトコル：href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"を指定していないので、ページコンテナから取得します。そして、あなたがページをfile:///として開くと、それは存在しないfile:///maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.cssを探してみるでしょう。

あなたはまだそれがファイル、してください、変更から作業したい場合：

のhref = "// maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome。 min.css」

へのhref = "http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"