IcoMoonで取得したアイコンをFont Awesomeと同じように使用したいがうまくいかない

下記のサイトを参考にFont Awesomeのアイコンを必要なものだけIcomoonから取得しました。
参考：IcoMoonを使ってFont Awesomeのアイコンを必要なものだけ使う方法

CSSもFont Awesomeから取得し、fa-fw fa-lgなどの設定をできるようにしました、
しかし、リスト表示時に文字の間隔が広がりません。

Font Awesomeのall.css内をリスト間隔の設定であるmargin-bottomで検索したが設定箇所がなく、どうやって調整しているのかが分からないです。

理想の表示

以下のように”fa-lg”サイズでアイコンをリスト表示したい。
![

試したこと1

Font Awesomeのall.cssから必要なクラスの設定をIcomoonのstyle.cssにコピー
※下に記載しているCSSです。
→　fa-lgでアイコンは大きくなるものの、リスト表示したときに間隔が狭くアイコンが重なってしまう。

試したこと2

リストの間隔をmargin-bottomで10px広げた。しかし、fa-lgをはずすと、今度は間隔が大きくなってしまい、その都度間隔を調整しなければならない。
他に方法がなければこの方法を使用するが、できればFont Awesomeのように自動で調整して欲しい。

li { margin-bottom: 10px; }

ソース

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8">
5    <title>Hello World!</title>
6    <link href="./IcoMoon/style.css" rel="stylesheet">
7    <!-- <link href="./font/css/all.css" rel="stylesheet"> -->
8  </head>
9  <body>
10
11    <ul class ="fa-ul">
12      <li><span class="fa-li" ><i class="fa fa-qrcode fa-fw fa-lg"></i></span>白くま</li>
13      <li><span class="fa-li" ><i class="fa fa-times-circle fa-fw fa-lg"></i></span>クロヒョウ</li>
14      <li><span class="fa-li" ><i class="fa fa-times fa-fw fa-lg"></i></span>チンパンジー</li>
15    </ul>
16  </body>
17</html>

CSS
1@font-face {
2  font-family: 'icomoon';
3  src:  url('fonts/icomoon.eot?o0lwr6');
4  src:  url('fonts/icomoon.eot?o0lwr6#iefix') format('embedded-opentype'),
5    url('fonts/icomoon.ttf?o0lwr6') format('truetype'),
6    url('fonts/icomoon.woff?o0lwr6') format('woff'),
7    url('fonts/icomoon.svg?o0lwr6#icomoon') format('svg');
8  font-weight: normal;
9  font-style: normal;
10  font-display: auto; /*変更*/
11}
12
13[class^="fa-"], [class*=" fa-"] {
14  /* use !important to prevent issues with browser extensions that change fonts */
15  font-family: 'icomoon' !important;
16  speak: none;
17  font-style: normal;
18  font-weight: normal;
19  font-variant: normal;
20  text-transform: none;
21  line-height: 1;
22
23  /* Better Font Rendering =========== */
24  -webkit-font-smoothing: antialiased;
25  -moz-osx-font-smoothing: grayscale;
26}
27
28.fa-times:before {
29  content: "\e900";
30}
31.fa-times-circle:before {
32  content: "\e901";
33}
34.fa-qrcode:before {
35  content: "\e938";
36}
37
38/* li {
39  margin-bottom: 10px;
40} */
41
42/* 以下　Font Awesomeのall.cssからコピー*/
43
44.fa,
45.fas,
46.far,
47.fal,
48.fad,
49.fab {
50  -moz-osx-font-smoothing: grayscale;
51  -webkit-font-smoothing: antialiased;
52  display: inline-block;
53  font-style: normal;
54  font-variant: normal;
55  text-rendering: auto;
56  line-height: 1; }
57
58.fa-lg {
59  font-size: 1.33333em;
60  line-height: 0.75em;
61  vertical-align: -.0667em; }
62
63.fa-fw {
64  text-align: center;
65  width: 1.25em; }
66
67.fa-ul {
68  list-style-type: none;
69  margin-left: 2.5em;
70  padding-left: 0; }
71  .fa-ul > li {
72    position: relative; }
73
74.fa-li {
75  left: -2em;
76  position: absolute;
77  text-align: center;
78  width: 2em;
79  line-height: inherit; }

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

回答2件

ベストアンサー

色々変更したところ、行間調整はできないが、アイコンが重ならないようになりました。
ひとまずこれで行こうと思います。
ありがとうございます。

主に変更を加えたのは、@font-face 、.fa、.fa-lgの設定です。
[class^="fa-"], [class*=" fa-"] は削除しました。

CSS
1@font-face {
2  font-family: 'icomoon';
3  src:  url('fonts/icomoon.eot?o0lwr6');
4  src:  url('fonts/icomoon.eot?o0lwr6#iefix') format('embedded-opentype'),
5    url('fonts/icomoon.ttf?o0lwr6') format('truetype'),
6    url('fonts/icomoon.woff?o0lwr6') format('woff'),
7    url('fonts/icomoon.svg?o0lwr6#icomoon') format('svg');
8  font-weight: normal;
9  font-style: normal;
10  font-display: auto;
11}
12
13.fa,
14.fas,
15.far,
16.fal,
17.fad,
18.fab {
19  font-family: 'icomoon' !important;
20  font-weight: normal;
21  text-transform: none;
22  -moz-osx-font-smoothing: grayscale;
23  -webkit-font-smoothing: antialiased;
24  display: inline-block;
25  font-style: normal;
26  font-variant: normal;
27  text-rendering: auto;
28  vertical-align: -.0667em;
29  line-height: 1; }
30
31.fa-lg {
32  font-size: 1.33333em; }
33
34.fa-xs {
35  font-size: .75em; }
36
37.fa-sm {
38  font-size: .875em; }
39
40.fa-1x {
41  font-size: 1em; }
42
43.fa-2x {
44  font-size: 2em; }
45
46.fa-3x {
47  font-size: 3em; }
48
49.fa-4x {
50  font-size: 4em; }
51
52.fa-5x {
53  font-size: 5em; }
54
55.fa-6x {
56  font-size: 6em; }
57
58.fa-7x {
59  font-size: 7em; }
60
61.fa-8x {
62  font-size: 8em; }
63
64.fa-9x {
65  font-size: 9em; }
66
67.fa-10x {
68  font-size: 10em; }
69
70.fa-fw {
71  text-align: center;
72  width: 1.25em; }
73
74.fa-ul {
75  list-style-type: none;
76  margin-left: 2.5em;
77  padding-left: 0; }
78  .fa-ul > li {
79    position: relative; }
80
81.fa-li {
82  left: -2em;
83  position: absolute;
84  text-align: center;
85  width: 2em;
86  line-height: inherit; }
87
88
89  /* アイコン */
90  .fa-times:before {
91    content: "\e900";
92  }
93  .fa-times-circle:before {
94    content: "\e901";
95  }
96  .fa-qrcode:before {
97    content: "\e902";
98  }
99  .fa-qrcode1:before {
100    content: "\e938";
101  }
102  .fa-exit:before {
103    content: "\ea14";
104  }
105