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

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

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

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

HTML5

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

Q&A

解決済

1回答

414閲覧

Font Awesomeのアイコンの文字コードについて

taka_oct092018

総合スコア133

CSS3

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

HTML5

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

0グッド

0クリップ

投稿2018/11/02 13:03

ver5.3.1を使っています。
パンくずリストに区切り文字(右矢印)の挿入をしたいのですが上手く行きません。
(実現したい例)
トップ > 記事一覧 >

右矢印の部分が小さな四角い枠で表示されてしまいます。

CSSファイルのセレクタ「.bread a::after」のプロパティに問題があるのでしょうか?
回答よろしくお願い致します。

contents.html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サンプル</title> <meta name = "viewport" content="width=device-width, initial-scale=1.0"> <link href = "https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <link rel = "stylesheet" href="css/normalize.css"> <link rel = "stylesheet" href="css/style.css"> <!-- Font Awesome ver5.3.1 --> <script defer src = "https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script> <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> <script> $(function(){ $(".head-c").click(function(){ $(".head-b").slideToggle(); }); }); </script> </head> <body id="index" class="nohero"> <header> <div class="container"> <div class="container-small"> <a href="index.html" class="head-a"> LOGGER </a> <button type="button" class="head-c"> <span class="fas fa-bars" title="MENU"></span> </button><!-- .head-c --> </div><!-- .container- small --> <nav class="head-b"> <ul> <li><a href="index.html">トップ</a></li> <li><a href="contents.html">コンテンツ</a></li> <li><a href="about.html">ABOUT</a></li> <li><a href="contact.html">お問い合わせ</a></li> </ul> </nav><!-- .head-b --> </div><!-- .container --> </header> <article class="post"> <div class="container"> <div class="bread"> <ol> <li><a href="index.html">トップ</a></li> <li><a href="#">記事一覧</a></li> </ol> </div><!-- .bread --> <h1>ライフログのはじめ方</h1> <img src="img/life.jpg" alt=""> <p>日常の生活を記録し、(略)。</p> <p>手動で記録するのは(略)</p> </div><!-- .container --> </article><!--.post --> <footer> (略) </footer> </body><!-- #index .nohero --> </html>

style.css

@charset "UTF-8"; /* 基本色 */ :root { --main-color:#5D9AB2; --accent-color:#BF6A7A; --dark-main-color:#2B5566; --text-bright-color:#fff; --icon-color:#fff; --icon-bk-color:#ddd; --gray-color:#ddd; --large-width:1000px; --middle-width:800px; } /* 基本設定:フォントサイズ */ @media (max-width:599px) { :root { font-size: 14px; } } @media (min-width: 600px) and (max-width: 799px) { :root { font-size: 16px; } } @media (min-width: 800px) { :root { font-size: 18px; } } body { font-size: 16px; } /* 基本設定:ページ全体 */ body { margin:0; 'Hiragino KaKu Gothic Pro',sans-serif; } /* コンテンツA: ヒーローイメージ */ .con-a { display:flex; align-items:center; justify-content:center; height: 100vh; min-height:450px; background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1)), url(../img/fruits.jpg); background-position:center; background-size:cover; text-align:center; color:#fff; color:var(--text-bright-color); } .con-a h1 { margin-top: 0; margin-bottom: 10px; font-size: 15vw; font-family:'Montserrat',sans-serif; letter-spacing:.2em; margin-left: .2em; } .con-a p { margin-top: 0; margin-bottom: 0; font-size: 18px; } .con-a img { width:20%; } .con-a a { display:inline-block; margin-top:20px; padding: 10px 30px; border:solid 3px currentColor; border-radius:6px; background-color: var(--accent-color); color:var(--text-bright-color); font-size: 14px; text-decoration: none; } .con-a a:hover { background-image: linear-gradient( rgba(255,255,255,.2), rgba(255,255,255,.2) ); } @media (min-width:768px) { .con-a h1 { font-size: 115px; } .con-a p { font-size: 24px; } } /* コンテンツB: 概要(アイコン+テキスト) */ .con-b .container { padding-top: 80px; padding-bottom: 20px; } .con-b .text { padding-left: 20px; padding-right: 20px; padding-bottom: 60px; text-align:center; } .con-b h2 { margin-top: 0; margin-bottom: 10px; font-size: 20px; } .con-b p { margin-top: 0; margin-bottom: 20px; font-size: 14px; line-height:1.8; opacity:.8; } .con-b a { color:var(--main-color); text-decoration:none; } .con-b a:hover { text-decoration:underline; } .con-b .icon { vertical-align: middle; margin-bottom: 20px; } .con-b .icon .fa-circle { color: var(--icon-bk-color); } .con-b .icon .fa-inverse { color: var(--icon-color); } @media (min-width:768px) { .con-b .container { max-width:var(--large-width); margin-left: auto; margin-right: auto; display:flex; } .con-b .text { flex:1; } } /* コンテンツC: 概要(アイコン+テキスト) */ .con-c { background-color: var(--main-color); color:var(--text-bright-color); } .con-c h2 { margin-top: 0; margin-bottom: 10px; font-size: 20px; } .con-c p { margin-top: 0; margin-bottom: 20px; font-size: 14px; line-height:1.8; opacity:.8; } .con-c a { background-color : var(--accent-color); border : solid 3px currentColor; border-radius : 6px; color : var(--text-bright-color); display : inline-block; font-size : 14px; margin-top : 20px; padding : 10px 30px; text-decoration : none; } .con-c a:hover { background-image: linear-gradient( rgba(255,255,255,.2), rgba(255,255,255,.2) ); } .con-c .photo { background-image : url(../img/note.jpg); background-position : center; background-size : cover; min-height : 200px; } .con-c .text { padding: 20px; } @media (min-width:768px) { .con-c .container { display:flex; max-width:var(--large-width); margin-left: auto; margin-right: auto; } .con-c .photo { flex:3; } .con-c .text { flex:2; padding: 50px; } } /* コンテンツD: 概要(アイコン+テキスト) */ .con-d .container { padding-top: 2px; } .con-d h2 { margin-top: 0; margin-bottom: 10px; font-size: 20px; } .con-d p { margin-top: 0; margin-bottom: 20px; font-size: 14px; line-height:1.8; opacity:.8; } .con-d a { display:inline-block; margin-top:20px; padding: 10px 30px; box-shadow:0 0 0 1px #888; border:solid 3px currentColor; border-radius:6px; background-color: var(--accent-color); color:var(--text-bright-color); font-size: 14px; text-decoration: none; } .con-d a:hover { background-image: linear-gradient( rgba(255,255,255,.2), rgba(255,255,255,.2) ); } .con-d .photo { min-height:200px; background-image: url(../img/life.jpg); background-position:center; background-size:cover; } .con-d .text { padding: 20px; } @media (min-width:768px) { .con-d .container { display:flex; flex-direction:row-reverse; max-width:var(--large-width); margin-left: auto; margin-right: auto; padding-top: 40px; padding-bottom: 40px; } .con-d .photo { flex:0 0 400px; } .con-d .text { flex:1; padding: 50px; } } /* ヘッダー */ header { position:absolute; top: 0; left: 0; z-index:100; width: 100%; background-color: rgba(255,255,255,.9); } .nohero header { position:static; border-bottom:solid 1px var(--gray-color); } /* ヘッダーA:サイト名 */ .head-a { display:inline-block; line-height:70px; padding-left: 20px; padding-right: 20px; background-color: var(--main-color); color:var(--text-bright-color); font-family: 'Montserrat',sans-serif; font-size: 24px; text-decoration:none; } /* ヘッダーB:ナビゲーションメニュー */ .head-b ul { margin: 0; padding: 0; list-style:none; } .head-b a { display:block; padding: 15px; color:inherit; font-size: 12px; text-decoration:none; } .head-b a:hover { background-color: rgba(0,0,0,.3); } @media (min-width: 768px) { header .container { display:flex; align-items:center; justify-content:space-between; max-width:var(--large-width); margin-left: auto; margin-right: auto; } .head-b ul { display:flex; } } /* ヘッダーC:トグルボタン */ @media (max-width: 767px) { /* 小さい外面用の設定 */ header .container-small { display:flex; align-items:center; justify-content:space-between; } .head-c { margin-right: 10px; padding: 0; border:none; outline:none; background:none; font-size:28px; opacity:.5; cursor:pointer; } .head-c:hover { opacity:.3; } .head-b { display:none; } } @media (min-width: 768px) { /* 大きい外面用の設定 */ .head-c { display: none; } .head-b { display: block !important; } } /* コンテンツページ:記事 */ .post .container { max-width:var(--middle-width); margin-left: auto; margin-right: auto; padding:30px 10px; } .post h1 { font-size: 2rem; padding-left: .5rem; border-left:solid .75rem var(--accent-color); } .post p { font-size: 1rem; line-height:2; } .post img { max-width:100%; } /* コンテンツページ:パンくずリスト */ .bread ol { display:flex; margin: 0; padding: 0; list-style:none; } .bread a { display:block; padding: 5px; color:inherit; font-size: .875rem; text-decoration:none; } /* ++++++++++++++ 問題箇所 ++++++++++++++++++++++++++++++++++++++++++++ */ .bread a::after { margin-left: 10px; content:'\f054'; font-family: 'FontAwesome'; opacity:.3; } .bread a:hover { background-color: rgba(0,0,0,.3); }

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

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

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

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

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

guest

回答1

0

ベストアンサー

Font Awesome の Version 5 をお使いになる場合は Version 5 の書き方をする必要があるものと思います。公式のページで詳しく解説されているようですので、そちらをご覧になってみてください。

ポイントは font-family の指定方法が変わったのと font-weight を指定する必要がある点です。 font-weight は Free と Pro only で使えるものが異なったりするようですのでそのあたりもご注意ください。

追記:

公式の次のページもご参考になるかと思います。

・・・そして、疑似要素( after )を使うべき強い理由がなければ、 <i> を使った方法に切り替えられた方が楽なのではないかもと思います。

投稿2018/11/02 14:25

編集2018/11/02 14:36
gh640

総合スコア1407

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

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

taka_oct092018

2018/11/13 03:50

gh640様  返信ありがとうございます。 fontawesomeについて調べてみましたが、疑似要素に関してはどうしても意図したようには 動いてくれませんでした。 そこで、ご指摘に通りに<i>で記述し直すことで無事解決出来ました。
gh640

2018/11/13 05:16

taka_oct092018 様 ご返信くださりありがとうございます。もうご返信はいただけないかなぁと思っていました。 そうでしたか。。 Font Awesome 公式は `<i>` を推奨のようですし、 HTML の変更が大変な状況(例: テンプレートが複雑な CMS を使っている)等でなければ、疑似要素のアプローチよりも `<i>` のアプローチの方がシンプル(はまることが少ない)かつメンテナンス性がよいので、疑似要素を使う強い理由がなければ `<i>` の方がよいと個人的には思います。 ともあれ、ご解決されたとのことでよかったです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問