Q&A
表記の件ですが、cssでカラーの指定をしても変わらないので、困っています。
詳細)
fortawesomeの導入については、webpackを利用しました。
javascript
1import '@fortawesome/fontawesome-free/js/fontawesome'; 2import '@fortawesome/fontawesome-free/js/solid'; 3import '@fortawesome/fontawesome-free/js/regular';
htmlのコード
html
1<div id="page_top"> 2 <div><i class="fas fa-angle-double-up"></i></div> 3</div>
cssのコード
scss
1#page_top{ 2 width: 50px; 3 height: 50px; 4 position: fixed; 5 right: 30px; 6 bottom: 30px; 7 background: $gray3; 8 opacity: 0.6; 9 border-radius: 50%; 10 z-index: 10; 11 div { 12 cursor: pointer; 13 position: relative; 14 width: 50px; 15 height: 50px; 16 text-decoration: none; 17 svg { 18 color: $white; 19 font-size: 25px; 20 position: absolute; 21 width: 25px; 22 height: 25px; 23 top: 0; 24 bottom: 0; 25 right: 0; 26 left: 0; 27 margin: auto; 28 text-align: center; 29 } 30 } 31}
ブラウザのコード
html
1<div> 2 <svg class="svg-inline--fa fa-angle-double-up fa-w-10" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-double-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""> 3 <path fill="currentColor" d="M177 255.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 351.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 425.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1zm-34-192L7 199.7c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l96.4-96.4 96.4 96.4c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9l-136-136c-9.2-9.4-24.4-9.4-33.8 0z"></path> 4 </svg> 5 <!-- <i class="fas fa-angle-double-up"></i> --> 6</div>
カラーを白くしたいのですが、どなたかやり方をご教授いただけませんでしょうか。。
よろしくお願いします。
回答1件
0
ベストアンサー
こうですかね。
css
1.svg-inline--fa.fa-angle-double-up path { 2 color: white; 3}
投稿2019/10/12 13:48
総合スコア484
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/10/13 04:06