【fontawesome】アイコンの編集【HTML5/CSS3】

前提・実現したいこと

Fontawesomeのアイコンを少し大きくして丸型に編集する方法を教えて頂けないでしょうか？
class="icon"で指定しているアイコンが対象です。
旧バージョンでは上手くアレンジ出来ていましたが、最新版では同じ設定でも横長の楕円形になってしまいます。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML5
1(HTML)
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5  <meta charset="UTF-8">
6  <title>サンプル</title>
7  <meta name        = "viewport" content="width=device-width, initial-scale=1.0">
8  <script defer src = "https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
9  <link href        = "https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
10  <link rel         = "stylesheet" href="css/normalize.css">
11  <link rel         = "stylesheet" href="css/style.css">
12</head>
13<body id="index">
14
15<section class="con-a">
16  <div class="container">
17    <img src="img/logo.svg" alt="">
18    <h1>LOGGER</h1>
19    <p>美味しく楽しくライフログ</p>
20    <a href="#">ライフログを始める</a>
21  </div><!-- .container -->
22</section><!-- .con-a -->
23
24<section class="con-b">
25  <div class="container">
26    <div class="text">
27      <i class="fas fa-chart-bar icon"></i>
28      <h2>ライフログって何？</h2>
29      <p>日常のあれこれを記録していくライフログ。いろいろなものが見えてきます。</p>
30      <a href="#">MORE...
31        <i class="fas fa-angle-right"></i>
32      </a>
33    </div><!-- .text -->
34
35    <div class="text">
36      <i class="fas fa-cogs icon"></i>
37      <h2>必要なのはスマホだけ</h2>
38      <p>ライフログを始めるのに必要なのはスマホだけ。いつでもスタートできます。</p>
39      <a href="#">MORE...
40        <i class="fas fa-angle-right"></i>
41      </a>
42    </div><!-- .text -->
43
44    <div class="text">
45      <i class="fas fa-rocket icon"></i>
46      <h2>SNSとの連係も簡単</h2>
47      <p>TwitterやFacebookといったSNSと連携して、簡単にログを共有することができます。</p>
48      <a href="#">MORE...
49        <i class="fas fa-angle-right"></i>
50      </a>
51    </div><!-- .text -->
52  </div><!-- .container -->
53</section><!-- .con-b -->
54
55<section class="con-c">
56  <div class="container">
57    <div class="photo"></div>
58    <div class="text">
59      <h2>面倒な設定やデータの管理は全部おまかせ</h2>
60      <p>ライフログでつまずきがちな面倒な設定やデータ管理の煩わしはありません。他のログアプリとの連係もワンクリックで完了です。</p>
61      <a href="#">詳しい設定方法を確認する
62        <i class="fas fa-angle-right"></i>
63      </a>
64    </div><!-- .text -->
65  </div><!-- .container -->
66</section><!-- .con-c -->
67
68<section class="con-d">
69  <div class="container">
70    <div class="photo"></div>
71    <div class="text">
72      <h2>ライフログで毎日の日常生活をもっと楽しむ</h2>
73      <p>ふと気が付くと蓄積しているライフログ。ログを見返すといろいろなことが見えてきて、なんてことのない日常も楽しくなってきます。</p>
74      <a href="#">たとえばこんな楽しみ方が…
75        <i class="fas fa-angle-right"></i>
76      </a>
77    </div><!-- .text -->
78  </div><!-- .container -->
79</section><!-- .con-d -->
80
81</body><!-- #index -->
82</html>
83(CSS)
84@charset "UTF-8";
85
86/* 基本色 */
87:root {
88  --main-color:#5D9AB2;
89  --accent-color:#BF6A7A;
90  --dark-color:#2B5566;
91  --text-bright-color:#fff;
92  --icon-color:#fff;
93  --icon-bk-color:#ddd;
94  --large-width:1000px;
95}
96
97/* 基本設定：ページ全体 */
98body {
99  margin:0;
100  'Hiragino KaKu Gothic Pro',sans-serif;
101}
102
103/* コンテンツA：　ヒーローイメージ */
104.con-a {
105  display:flex;
106  align-items:center;
107  justify-content:center;
108  height: 100vh;
109  min-height:450px;
110  background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1)), url(../img/fruits.jpg);
111  background-position:center;
112  background-size:cover;
113  text-align:center;
114  color:#fff;
115  color:var(--text-bright-color);
116}
117
118.con-a h1 {
119  margin-top: 0;
120  margin-bottom: 10px;
121  font-size: 15vw;
122  letter-spacing:.2em;
123  margin-left: .2em;
124}
125
126.con-a p {
127  margin-top: 0;
128  margin-bottom: 0;
129  font-size: 18px;
130}
131
132.con-a img {
133  width:20%;
134}
135
136.con-a a {
137  display:inline-block;
138  margin-top:20px;
139  padding: 10px 30px;
140  border:solid 3px currentColor;
141  border-radius:6px;
142  background-color: var(--accent-color);
143  color:var(--text-bright-color);
144  font-size: 14px;
145  text-decoration: none;
146}
147
148.con-a a:hover {
149  background-image: linear-gradient(
150    rgba(255,255,255,.2),
151    rgba(255,255,255,.2)
152  );
153}
154
155@media (min-width:768px) {
156  .con-a h1 {
157    font-size: 115px;
158  }
159
160  .con-a p {
161    font-size: 24px;
162  }
163}
164
165/* コンテンツB：　概要（アイコン＋テキスト） */
166.con-b .container {
167  padding-top: 80px;
168  padding-bottom: 20px;
169}
170
171.con-b .text {
172  padding-left: 20px;
173  padding-right: 20px;
174  padding-bottom: 60px;
175  text-align:center;
176}
177
178.con-b h2 {
179  margin-top: 0;
180  margin-bottom: 10px;
181  font-size: 20px;
182}
183
184.con-b p {
185  margin-top: 0;
186  margin-bottom: 20px;
187  font-size: 14px;
188  line-height:1.8;
189  opacity:.8;
190}
191
192.con-b a {
193  color:var(--main-color);
194  text-decoration:none;
195}
196
197.con-b a:hover {
198  text-decoration:underline;
199}
200
201.con-b .icon {
202  display:inline-block;
203  margin-bottom: 20px;
204  font-size: 40px;
205  width:2em;
206  line-height:2em;
207  text-align:center;
208  background-color: var(--icon-bk-color);
209  color:var(--icon-color);
210  border-radius:50%;
211}
212
213@media (min-width:768px) {
214  .con-b .container {
215    max-width:var(--large-width);
216    margin-left: auto;
217    margin-right: auto;
218    display:flex;
219  }
220
221  .con-b .text {
222    flex:1;
223  }
224}
225
226/* コンテンツC：　概要（アイコン＋テキスト） */
227.con-c {
228  background-color: var(--main-color);
229  color:var(--text-bright-color);
230}
231
232.con-c h2 {
233  margin-top: 0;
234  margin-bottom: 10px;
235  font-size: 20px;
236}
237
238.con-c p {
239  margin-top: 0;
240  margin-bottom: 20px;
241  font-size: 14px;
242  line-height:1.8;
243  opacity:.8;
244}
245
246.con-c a {
247  display:inline-block;
248  margin-top:20px;
249  padding: 10px 30px;
250  border:solid 3px currentColor;
251  border-radius:6px;
252  background-color: var(--accent-color);
253  color:var(--text-bright-color);
254  font-size: 14px;
255  text-decoration: none;
256}
257
258.con-c a:hover {
259  background-image: linear-gradient(
260    rgba(255,255,255,.2),
261    rgba(255,255,255,.2)
262  );
263}
264
265.con-c .photo {
266  min-height:200px;
267  background-image: url(../img/note.jpg);
268  background-position:center;
269  background-size:cover;
270}
271
272.con-c .text {
273  padding: 20px;
274}
275
276@media (min-width:768px) {
277  .con-c .container {
278    display:flex;
279    max-width:var(--large-width);
280    margin-left: auto;
281    margin-right: auto;
282  }
283
284  .con-c .photo {
285    flex:3;
286  }
287
288  .con-c .text {
289    flex:2;
290    padding: 50px;
291  }
292}
293
294/* コンテンツD：　概要（アイコン＋テキスト） */
295.con-d .container {
296  padding-top: 2px;
297}
298
299.con-d h2 {
300  margin-top: 0;
301  margin-bottom: 10px;
302  font-size: 20px;
303}
304
305.con-d p {
306  margin-top: 0;
307  margin-bottom: 20px;
308  font-size: 14px;
309  line-height:1.8;
310  opacity:.8;
311}
312
313.con-d a {
314  display:inline-block;
315  margin-top:20px;
316  padding: 10px 30px;
317  box-shadow:0 0 0 1px #888;
318  border:solid 3px currentColor;
319  border-radius:6px;
320  background-color: var(--accent-color);
321  color:var(--text-bright-color);
322  font-size: 14px;
323  text-decoration: none;
324}
325
326.con-d a:hover {
327  background-image: linear-gradient(
328    rgba(255,255,255,.2),
329    rgba(255,255,255,.2)
330  );
331}
332
333.con-d .photo {
334  min-height:200px;
335  background-image: url(../img/life.jpg);
336  background-position:center;
337  background-size:cover;
338}
339
340.con-d .text {
341  padding: 20px;
342}
343
344@media (min-width:768px) {
345  .con-d .container {
346    display:flex;
347    flex-direction:row-reverse;
348    max-width:var(--large-width);
349    margin-left: auto;
350    margin-right: auto;
351    padding-top: 40px;
352    padding-bottom: 40px;
353  }
354
355  .con-d .photo {
356    flex:0 0 400px;
357  }
358
359  .con-d .text {
360    flex:1;
361    padding: 50px;
362  }
363}
364

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

svg に置き換わるアイコンは width / height で……ということなんですが、したいことは用意された機能でほぼできるのでわざわざ自前でスタイリングしなくてもいいでしょう(してもいい)

HTML
1      <span class="fa-stack fa-2x icon">
2        <i class="fas fa-circle fa-stack-2x"></i>
3        <i class="fas fa-chart-bar fa-stack-1x fa-inverse"></i>
4      </span>

CSS
1.con-b .icon {
2  vertical-align: middle;
3}
4
5.con-b .icon .fa-circle {
6  color: var(--icon-bk-color);
7}
8
9.con-b .icon .fa-inverse {
10  color: var(--icon-color);
11}