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

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

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

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

7972閲覧

【CSS】 【HTML】 アイコンをクリックして、リンク先に遷移したい

nekomura

総合スコア132

HTML5

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/09/08 03:06

編集2016/09/08 03:24

よろしくお願いいたします。
現在、webページを作っています。

下記の写真の蛍光ペンで囲っている部分のように、アイコンを配置して、それをクリックするとリンク先に遷移するようにしたいと思っています。
お手本画像
Font Awesomeからアイコンを使おうとしているのですが、画面には反映されません。
カーソルはきちんと合って、クリックすれば指定したリンクにもちゃんと飛ぶのですが、アイコンが表示されていない状態です。
現在の画面
ソースは以下の通りなのですが、ご覧頂いておかしいところがあればご指摘いただきたく存じます。
この部分に関しては、htmlクラスの記述のみなのですが、cssも必要なのかなど、解決のためのご教示を頂ければ幸いです。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <div class="info-wrapper"> <a href="#" class="href product">製品情報</a> <a href="#" class="href device">デバイス情報</a> <a href="#" class="href support">サポート</a> <!-- 以下、質問該当部分--> <a href="http://hogehogehoge" class="href setting"><span class="fa fa-bar" aria-hidden="true"></span></a> </div>

どうぞよろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

fa-barではなく、fa-barsではないでしょうか。

HTML

1<i class="fa fa-bars" aria-hidden="true"></i>

fa-bars: Font Awesome Icons
http://fontawesome.io/icon/bars/

投稿2016/09/08 03:41

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

nekomura

2016/09/08 04:09

miz様 …おっしゃるとおりでございました。。。 恥ずかしい…。 無事に解決いたしました、ありがとうございます。
guest

0

Font-Awesomeのファイル自体は読み込まれておりますか?

おそらく下記を埋め込めば表示されるかと思いますが、

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> すでに読み込み済みであれば、環境やエラーの有無を教えていただけますか??

投稿2016/09/08 03:19

MaShiRo_H

総合スコア328

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

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

nekomura

2016/09/08 03:32 編集

MaShiRo_H様 ご回答ありがとうございます。 詳細を記載しておらず申し訳ありません、 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> は読み込み済みです。 私の記載したバージョンが4.3の為、ご回答いただいた4.4でも試してみたのですが特に変化はありませんでした。 環境は、eclipseの動的webプロジェクト、エラーは特に出ておりません(質問の意図を履き違えた答えであればすみません。。。)。 お手数ですが、思い当たるアドバイスがございましたらどうぞよろしくお願いいたします。
nekomura

2016/09/08 04:10

今回は、スペルミスによる間違いでした。。。 お恥ずかしいです。 アドバイス、ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問