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

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

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

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

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

Q&A

解決済

2回答

1497閲覧

FontAwesomeのCDNを4系から5系にしたら表示されなくなりました

pecchan

総合スコア555

CSS

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

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

0グッド

0クリップ

投稿2021/01/12 09:31

編集2021/01/12 10:01

初めてFontAwesomeを利用してます。
CDNを4から5にしたらアイコン(虫めがね)が表示されなくなりました。

元々

html

1<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 2 3<form method="get" action="#" class="search_container"> 4 <input type="text" placeholder="何かお探しですか?"> 5 <input type="submit" value="&#xf002" > 6 </form> 7

イメージ説明

変更

html

1<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"> 2<form method="get" action="#" class="search_container"> 3 <input type="text" placeholder="何かお探しですか?"> 4 <input type="submit" value="&#xf002" > 5 </form> 6

イメージ説明

###試したこと
valueのところを、
¥f002
など変えてみましたが同じでした。

どうすれば表示できるでしょうか?

分かる方教えて下さい。

###CSS追加
ご質問のおかげでfont-family:がバージョン4の指定だったと分かりました。
バージョン5の指定に変えてみました。

css

1.search_container{ 2 position: relative; 3 box-sizing: border-box; 4 border: 2px solid #ddd; 5 display: block; 6 /* margin: 3px 10px; */ 7 border-radius: 3px; 8 height: 2.3em; 9 /* width: 265px; */ 10 width: 100%; 11 /* overflow: hidden; */ 12 background-color: #fff; 13 input[type="text"]{ 14 width: 100%; 15 border: none; 16 height: 2.0em; 17 padding-left: 10px; 18 &:focus { 19 box-shadow: 0 0 12px 0 rgba(255,153,0,1); 20 border: 2px solid #FFF !important; 21 outline: 0; 22 } 23 } 24 input[type="submit"]{ 25 26 cursor: pointer; 27 font-family: 'Font Awesome 5 Free'; /*バージョン4はFontAwesome;*/ 28 border: none; 29 background: $mainColor2; 30 color: #fff; 31 position: absolute; 32 width: 3.5em; 33 height: 2.05em; 34 /* width: 50px; */ 35 /* height: 41px; */ 36 right: 0px; 37 top: 0; 38 outline : none; 39 text-align: center; 40 } 41} 42 43 44 45

ですが一色になってしまいました。
イメージ説明

もう少し調べてみます。

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

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

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

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

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

maisumakun

2021/01/12 09:43

Font Awesome本体以外に、当該ボタンへ適用しているCSSはありますか?
Lhankor_Mhy

2021/01/12 09:44

CSSをご提示ください。
m.ts10806

2021/01/12 09:47

ドキュメントも確認してください。 メジャーバージョンアップで仕様が変わるのはよくある事です。
pecchan

2021/01/12 09:54

記載漏れ失礼しました。 CSS側追加します。 ご質問のおかげでで少し気づきました。
guest

回答2

0

自己解決

皆さんのおかげでヒントを得ることができ解決できました。
一人では無理でした。
有難う御座います!

変更した部分は以下の通りです。

html側
fasを追加

html

1<input type="submit" value="&#xf002"><input type="submit" value="&#xf002" class="fas">

css側
バージョン5の指定に変更

css

1font-family: FontAwesome → 'Font Awesome 5 Free';

投稿2021/01/12 10:19

pecchan

総合スコア555

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

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

0

以下のような指定では、いかがでしょうか。

HTML

1<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"> 2 3<input type="submit" value="&#xf002" class="fas fa-search">

投稿2021/01/12 09:46

_whitecat_22

総合スコア1305

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

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

pecchan

2021/01/12 10:02

有難う御座います! 虫めがね表示されましたが赤色でした。(白で表示したい) CSS指定を忘れていたのでそちらを解消してみようと思います! すいません、有難う御座います。
_whitecat_22

2021/01/12 10:09

いえいえ、どういたしまして。 CSSも関係しますものね! 少しでもお役に立てならば幸いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問