質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

3回答

3329閲覧

bootstrapのfont awesomeが表示されない

tidavest

総合スコア595

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2017/02/23 07:45

<!Doctype html> <head><link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css> <link rel="stylesheet" type="text/css" href="style.css"></head> <body> <div class="wrapper"> <div class="header"> <H2>主の独り言</H> <img src="ninja.jpg"> <p id="RealtimeClockArea">※ここに時計(2桁固定版)が表示されます。</p> <script type="text/javascript"> function set2fig(num) { // 桁数が1桁だったら先頭に0を加えて2桁に調整する var ret; if( num < 10 ) { ret = "0" + num; } else { ret = num; } return ret; } function showClock2() { var nowTime = new Date(); var nowHour = set2fig( nowTime.getHours() ); var nowMin = set2fig( nowTime.getMinutes() ); var nowSec = set2fig( nowTime.getSeconds() ); var msg = "現在時刻は、" + nowHour + ":" + nowMin + ":" + nowSec + " です。"; document.getElementById("RealtimeClockArea").innerHTML = msg; } setInterval('showClock2()',1000); </script> </div> <div class="container-fluid"> <div class="row"> <div class="col-sm-9"><p><i class="fa fa-dot-circle-o" aria-hidden="true"></i>日本で、 </p> </div> <div class="col-sm-3"> <div class="one"> <p>通称:主</p> <p>年齢:36歳</p> <p>性別:男性</p> <p>履歴書</p> <p>私、主が日々気になったことなどをつづります...</p> </div> <div class="two"> <p>現在の日本について</p> </div> </div> </div> </div> </div> </body> </html>

上記は、私が作っているコードです。
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

<i class="fa fa-dot-circle-o" aria-hidden="true"></i>
をコード中に記載しています。
このフォントは、サークルを表示するものなのですが、表示されませんでした。
どこが間違っているのでしょうか。ご指摘お願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

これでどうでしょう。

HTML

1<!Doctype html> 2<html><!-- 追加 --> 3<head> 4 <meta charset="utf-8"><!-- 追加 --> 5 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 6 <link rel="stylesheet" type="text/css" 7 href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 8 <title>タイトル</title><!-- 追加 --> 9 <style type="text/css"> 10 .container-fluid { 11 margin-top: 15px; 12 } 13 </style> 14</head> 15<body> 16<div class="wrapper"> 17 <div class="header"> 18 <h2>主の独り言</h2><!-- h2タグの対応ができていなかったので修正 --> 19 <img src="ninja.jpg"> 20 21 <p id="RealtimeClockArea">※ここに時計(2桁固定版)が表示されます。</p> 22 <script type="text/javascript"> 23 function set2fig(num) { 24 // 桁数が1桁だったら先頭に0を加えて2桁に調整する 25 var ret; 26 if (num < 10) { 27 ret = "0" + num; 28 } 29 else { 30 ret = num; 31 } 32 return ret; 33 } 34 function showClock2() { 35 var nowTime = new Date(); 36 var nowHour = set2fig(nowTime.getHours()); 37 var nowMin = set2fig(nowTime.getMinutes()); 38 var nowSec = set2fig(nowTime.getSeconds()); 39 var msg = "現在時刻は、" + nowHour + ":" + nowMin + ":" + nowSec + " です。"; 40 document.getElementById("RealtimeClockArea").innerHTML = msg; 41 } 42 setInterval('showClock2()', 1000); 43 </script> 44 </div> 45 <div class="container-fluid"> 46 <div class="row"> 47 <div class="col-sm-9"><p> 48 <i class="fa fa-dot-circle-o" aria-hidden="true"></i>日本で、 49 </p> 50 </div> 51 <div class="col-sm-3"> 52 <div class="one"> 53 <p>通称:主</p> 54 <p>年齢:36歳</p> 55 <p>性別:男性</p> 56 <p>履歴書</p> 57 <p>私、主が日々気になったことなどをつづります...</p> 58 </div> 59 <div class="two"> 60 <p>現在の日本について</p> 61 </div> 62 </div> 63 </div> 64 </div> 65</div> 66<!-- 不要なdivの閉じタグを削除 --> 67</body> 68</html>

投稿2017/02/23 08:11

編集2017/02/23 08:35
s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/02/23 08:27

もしかして内容をエディタで作ってコピー&ペースしていませんか?teratail のバグで記述内容が表示されないというものが以前有ったので、ペースト後に何文字か記入してみてください。
s8_chu

2017/02/23 08:37 編集

kei344さんの指摘された通り記述内容が表示されていませんでしたので修正させていただきました。失礼しました。
tidavest

2017/03/09 07:49

ありがとうございます。できました。
guest

0

ベストアンサー

前の質問でも整形しましたが、ちゃんとlinkタグを使いましょう。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

投稿2017/02/23 08:35

gin

総合スコア2722

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tidavest

2017/02/23 23:52

どうもありがとうございます。
guest

0

投稿2017/02/23 07:47

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tidavest

2017/03/09 07:50

ありがとうございます。できました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問