実現したいこと
・各ヘッダーメニューの先頭に 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
0 コメント