Q&A
コードは、コードブロックにて記載してください。
編集画面にて、<code>ボタンで、必要な文字を出せます。
あぁ、Awesome5という、CSSライブラリなのですね、失礼しました・・・。
とにかくコードブロックで記載お願いします。
---- 以下元コメント ----
また、読み込んでいるCSSのコードも記載ください。
（HTMLだけでは、まったく回答しようがない）
質問文は編集できます。
前提・実現したいこと
Awesome5のフリーアイコン2つを重ねてサイズ7em程度に大きくしたいです。
よろしくお願いいたします。
発生している問題・エラーメッセージ
背面に配置するfa-stack-2xを大きくするために7xを指定すると大きさが小さくなってしまいます。
該当のソースコード
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> <title></title> <style> <!-- .fa-white::before{ color: #fff; } --> </style> </head> <body> <span class="fa-stack"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fas fa-bed fa-stack-1x fa-white"></i> </span> </body> </html>試したこと
<span class="fa-stack"> <i class="fas fa-circle fa-stack-2x"></i> ←ここの2xを7xにすると大きさが逆に小さくなります。 <i class="fas fa-bed fa-stack-1x fa-white"></i> </span>補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
miyabi_takatsukさん
提示されてますよ。CDNのCSS読み込んでstyleタグに直書きされています。
質問者さん
解決されたようですが、せめてmiyabi_takatsukさんが仰っているコード部分だけでもご対応願えませんか？
回答2件
0
ベストアンサー
全体を7倍にしたいのであれば fa-7x を追加するだけです。
HTML
1<span class="fa-stack fa-7x"> 2 <i class="fas fa-circle fa-stack-2x"></i> 3 <i class="fas fa-bed fa-stack-1x fa-inverse"></i> 4</span>
https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons
そうではなく背景部分のみ大きくしたいというのであれば、位置合わせが面倒になってくるので SVG + JS 版を使うことをお勧めします。
HTML
1<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.6.1/js/all.js" integrity="sha256-sPvAWMT6ybM+jnVfL9qUIIwiHHeJOhXZuqVCV7tjU2A=" crossorigin="anonymous"></script>
HTML
1<i class="fa-7x fas fa-bed" data-fa-transform="shrink-13" data-fa-mask="fas fa-circle"></i>
https://fontawesome.com/how-to-use/on-the-web/styling/masking
data-fa-transform 属性についてはここが詳しいようです。
https://niwaka-web.com/fontawsome5_svg_js/#002-7
投稿2019/06/27 05:50
総合スコア13749
0
ここの2xを7xにすると大きさが逆に小さくなります。
css内を検索しますと、そもそも.fa-stack-7xというのは存在しないことが分かります。
あるのは.fa-7xだけですね。
.fa-stack-*xについても1と2しかありません。
.fa-stack-7xという名前で自分でクラスを作り、.fa-stack-*xの内容をコピーし、サイズや位置を調整されては如何でしょうか。
※たぶん下のアイコンは位置調整も別途必要なのでクラスは最低2つ必要です
投稿2019/06/27 03:03
編集2019/06/27 03:21総合スコア80888
あなたの回答
tips
プレビュー
