fa-chart-barのアイコンを編集しています。現在の設定は以下のとおりです。旧バージョンでは上手く行っていましたがver5.3.1に変えてから横長の楕円形になってしまいました。よろしくお願いします。 (HTML) ライフログって何？日常のあれこれを記録していくライフログ。いろいろなものが見えてきます。 MORE... (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; }

うーん・・・

fontawesomeのアイコンを少し大きな丸型に編集する方法

解決済

質問者：taro_11
質問日時：2018/10/08 19:39
回答数：1件

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>
</div>
</section>

(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;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2018/10/10 11:37

こんにちは

回答が無いようですので・・・

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)と同じになると思います。
（レイアウト上の調整が必要になる可能性はありますが…）