🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

CSS

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

Q&A

解決済

1回答

484閲覧

Font Awesome のアイコンと共にリンク化した文字列を、好みのフォントに変えたい

punchan36

総合スコア105

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

CSS

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

0グッド

1クリップ

投稿2023/05/03 07:48

実現したいこと

・各ヘッダーメニューの先頭に Font Awesome のアイコンを表示させたい
・アイコン、文字列のいずれかにマウスオーバーすると互いが連動して hover が作動するようにしたい(互いの色が変わる)
・メニューの文字列は自分好みのフォントで表示させたい

前提

ヘッダーメニューを少し独特なフォントで表示しています。
イメージ説明

これらのメニューに合ったアイコンを、それぞれのメニューの文字列の先頭に表示させました。アイコン、文字列のいずれかにマウスオーバーすると互いが連動して hover で色が変わるようにしております。するとこのように文字列(Home)のフォントが Font Awesome の仕様(?)につられてスタイリッシュになってしまいます。
イメージ説明

自分好みのフォントを強制的に表示させようとすると、文字列は希望通りになりますがアイコンは文字化けで表示出来なくなります。
イメージ説明

また以下のようにアイコンと文字列を別々に記述すれば両方とも希望通りに表示されますが、要素にマウスオーバーした時に連動して hover が作動してくれません。また各要素が離れてしまうのも希望通りではありません。
イメージ説明

アイコン、文字列が連動しており、かつ自分好みの文字列で表示出来るようにしたいです。
どなたかご教授いただければ有難いです。

該当のソースコード

application.html.erb

Ruby

1<head> 2 <title>Learn Japanese with Punchan</title> 3 <%= csrf_meta_tags %> 4 <%= csp_meta_tag %> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 7 8 <link rel="preconnect" href="https://fonts.googleapis.com"> 9 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 10 <link href="https://fonts.googleapis.com/css2?family=Darumadrop+One&display=swap" rel="stylesheet"> 11</head> 12 13<header> 14 <div class="header"> 15 # 文字列のみの表示。 16 <%= link_to("Home", "/", class: "link") %> 17 18 # 文字列のフォントが Font Awesome 側に引っ張られてしまう。 19  <a class="fa fa-house" href="/"> Home</a> 20 21 # 文字列とフォントを独立させて表示。連動しない。 22 <a class="fa fa-house" href="/"></a><%= link_to("Home", "/", class: "link") %> 23</header>

homes.scss

scss

1# 文字列のフォントを強制的に自分好みにする。アイコンが文字化けしてしまう。 2body a { 3 font-family: 'Darumadrop One', cursive !important; 4} 5 6# マウスオーバーした時にリンク部分の文字色を変える。 7.header a:hover { 8 color: #FF6600; 9 text-decoration: underline; 10 transition: 0.2s; 11}

補足情報(FW/ツールのバージョンなど)

ruby 2.6.8p205 (2021-07-07 revision 67951) [x64-mingw32]
RubyGems 3.0.3.1
Rails 5.2.6

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

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

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

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

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

guest

回答1

0

ベストアンサー

a要素に Font Awesome のクラスを付けるのではなく、i要素にクラスをつけてください。

html

1<a href="/"><i class="fa fa-house"></i> Home</a>

投稿2023/05/05 06:35

hatena19

総合スコア34073

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

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

punchan36

2023/05/05 11:25

リンクとアイコンは別々に記述する必要があったのですね。 有難うございます。無事希望通りの実装になりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問