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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

1回答

2000閲覧

HTMLでICONを任意の画像で表示したい

yoshio197

総合スコア38

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2016/06/23 04:15

お世話になります。web開発初心者です。

実現したいことを検索で見つけたHPから下記ソースを取得しました。

html

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 7 <title>TEST</title> 8 9 <meta name="HandheldFriendly" content="True"> 10 <meta name="MobileOptimized" content="320"> 11 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 12 13 <link rel="shortcut icon" href="http://ethemes.com/wp-content/themes/ethemes/images/favicon.ico"> 14 15 <link rel='stylesheet' id='validate-engine-css-css' href='http://ethemes.com/wp-content/plugins/wysija-newsletters/css/validationEngine.jquery.css' type='text/css' media='all' /> 16 <link rel='stylesheet' id='dashicons-css' href='http://ethemes.com/wp-includes/css/dashicons.min.css' type='text/css' media='all' /> 17 <link rel='stylesheet' id='thickbox-css' href='http://ethemes.com/wp-includes/js/thickbox/thickbox.css' type='text/css' media='all' /> 18 <link rel='stylesheet' id='wpdm-front-css' href='http://ethemes.com/wp-content/plugins/download-manager/css/front.css' type='text/css' media='all' /> 19 <link rel='stylesheet' id='dlm-frontend-css' href='http://ethemes.com/wp-content/plugins/download-monitor/assets/css/frontend.css' type='text/css' media='all' /> 20 <link rel='stylesheet' id='ethemes-stylesheet-css' href='http://ethemes.com/wp-content/themes/ethemes/library/css/style.css' type='text/css' media='all' /> 21 <link rel='stylesheet' id='ethemes-bootstrap-css' href='http://ethemes.com/wp-content/themes/ethemes/library/css/bootstrap.min.css' type='text/css' media='all' /> 22 <link rel='stylesheet' id='ethemes-font-awesome-css' href='http://ethemes.com/wp-content/themes/ethemes/library/css/font-awesome.min.css' type='text/css' media='all' /> 23 24 </head> 25<body class="single single-project postid-86"> 26 27 <div class="body"> 28 <section class="statistics"> 29 <div class="container"> 30 <div class="row"> 31 32 <div class="col-md-3"> 33 <i class="fa fa-clock-o"></i> 34 <h1 class="value"> 35 430 </h1> 36 <h4 class="label"> 37 Hours </h4> 38 </div> 39 40 <div class="col-md-3"> 41 <i class="fa fa-code"></i> 42 <h1 class="value"> 43 24,301 </h1> 44 <h4 class="label"> 45 Lines of Code </h4> 46 </div> 47 48 <div class="col-md-3"> 49 <i class="fa fa-file-o"></i> 50 <h1 class="value"> 51 30 </h1> 52 <h4 class="label"> 53 Pages </h4> 54 </div> 55 56 <div class="col-md-3"> 57 <i class="fa fa-coffee"></i> 58 <h1 class="value"> 59 254 </h1> 60 <h4 class="label"> 61 Cups of Coffee </h4> 62 </div> 63 64 65 </div><!-- .row --> 66 </div><!-- .container --> 67 </section><!-- .statistics --> 68 69 70 </div><!-- .body --> 71 72</body> 73</html>

その中で下記ソースにより、時計のアイコンが表示されていると思うのですが、
時計のアイコンではなく任意の画像を表示したいです。
どうすれば実現できるのでしょうか?ご教授ください。

html

1<link rel='stylesheet' id='ethemes-font-awesome-css' href='http://ethemes.com/wp-content/themes/ethemes/library/css/font-awesome.min.css' type='text/css' media='all' /> 2<i class="fa fa-clock-o"></i>

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

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

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

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

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

guest

回答1

0

ベストアンサー

これは、Font Awesomeというアイコン集からとっているものです。

リストにあるものであれば、<i>のclassを書き換えるだけで入れ替えが可能です。

投稿2016/06/23 04:18

maisumakun

総合スコア145121

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

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

yoshio197

2016/06/23 04:24

><i>のclassを書き換えるだけで入れ替えが可能です。 それは何となく分かるですが何分初心者のため、 書き換え方がよくわかりません。 サンプルをご教授して頂けないでしょうか?
yoshio197

2016/06/23 04:42

すいません、任意の画像と言ったのはjpgとかの画像のことです。 自己解決しました。<img src="" />使えば実現できました。 ご迷惑をおかけしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問