fa-chart-barのアイコンを編集しています。
現在の設定は以下のとおりです。
旧バージョンでは上手く行っていましたがver5.3.1に変えてから横長の楕円形になってしまいました。
よろしくお願いします。
(HTML)
<head>
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/a …
</head>
<section class="con-b">
<div class="container">
<div class="text">
<i class="fas fa-chart-bar icon"></i>
<h2>ライフログって何?</h2>
<p>日常のあれこれを記録していくライフログ。いろいろなものが見えてきます。</p>
<a href="#">MORE...</a>
<i class="fas fa-angle-right"></i>
</div><!-- .text -->
</div><!-- .container -->
</section><!-- .con-b -->
(CSS)
.con-b .icon {
background-color : #ddd);
border-radius : 50%;
color : #fff;
display : inline-block;
font-size : 40px;
line-height : 2em;
margin-bottom : 20px;
text-align : center;
width : 2em;
}
No.1ベストアンサー
- 回答日時:
こんにちは
回答が無いようですので・・・
fontawesomeをまったく存じませんので仕組みをわかっていませんが、iタグ内に要素が追加されるか、または背景画像などで設定されるものと仮定しての回答です。
(仮定と違う仕組みだとうまくいかないと思いますが、悪しからず)
>横長の楕円形になってしまいました。
から想像するところ、内包要素の幅が指定サイズよりも大きいものと思われます。
ご提示の
>border-radius : 50%;
で丸になるには、要素の高さと幅が同じサイズである必要がありますが、内包要素が大きくて指定の2emに納まりきらないのでしょう。
方法として考えられるのは
1)丸のサイズを大きくする
height:3em; width:3em;
などのように、現状よりも少し大きくしてあげれば、納まるようなサイズのところで丸になるものと想像します。
2)はみ出た部分は無視する
現状のサイズ指定を優先して、表示しきれない部分は無視する。
例えば、
overflow:hidden;
とするとか、あるいはサイズ指定の際に
width:2em !important;
などとしておく。
3)一旦、全体を表示できるサイズにした上で、まとめて縮小する
内包要素が不明なので、親要素(i要素)に一旦収めて、i要素を縮小表示する方法
例えば
height:4em; height:4em;
transform: scale(0.5);
などで、結果的に元のサイズ(2em)と同じになると思います。
(レイアウト上の調整が必要になる可能性はありますが…)
fujillin様
丁寧な解説、ありがとうございました。
実は質問を投稿した後に色々と調べた結果、HTMLだけでも編集可能なことが分かり、
無事に解決出来ました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
「諸要素」とはどういう意味で...
-
質問1.
-
smallにtext-allignが効かない
-
【ヒトの神秘】美男美女から何...
-
HTML_QUICKFORMのSELECTにデフ...
-
emとstrongの反対
-
HTML の繰返し法???
-
メールアドレス(グループ)の...
-
CSSで改行後の行間調整
-
その要素がjQueryでremove()済...
-
小説の行をマークアップ
-
HTML5を守ったアフィリエイトサ...
-
HTMLでTextareaを横に2つ並べ...
-
submit buttonの違い
-
aタグ 中央寄せ
-
マージソートの計算量について-...
-
CSSのa:hoverが急に一部だけ効...
-
改行ほどは行かないけど、若干...
-
CSSを使用したメニューのIEの表...
-
イメージタグはタグで囲むべき?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
2個のFormを横並びにしたい
-
含む含まないという概念自体の...
-
角丸画像の背景色を透明にした...
-
smallにtext-allignが効かない
-
超音波で洗脳。
-
質問1.
-
「諸要素」とはどういう意味で...
-
改行ほどは行かないけど、若干...
-
1から100までの自然数のうち、2...
-
マージソートの計算量について-...
-
タグは大文字と小文字どちらが...
-
textareaの幅を画面と合わせたい
-
親要素・子要素
-
テキストボックスの中にリンク...
-
html タグの閉じスラッシュ前の...
-
input type="hidden"で取得した...
-
NからZへの全単射を具体的に構...
-
【CSS】imgタグを、親要素の幅...
-
HTMLページ上でiframeを最前面...
おすすめ情報