質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.98%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 172
退会済みユーザー

退会済みユーザー

下記のサイトを参考に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; } 


イメージ説明

ソース

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link href="./IcoMoon/style.css" rel="stylesheet">
    <!-- <link href="./font/css/all.css" rel="stylesheet"> -->
  </head>
  <body>

    <ul class ="fa-ul">
      <li><span class="fa-li" ><i class="fa fa-qrcode fa-fw fa-lg"></i></span>白くま</li>
      <li><span class="fa-li" ><i class="fa fa-times-circle fa-fw fa-lg"></i></span>クロヒョウ</li>
      <li><span class="fa-li" ><i class="fa fa-times fa-fw fa-lg"></i></span>チンパンジー</li>
    </ul>
  </body>
</html>
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?o0lwr6');
  src:  url('fonts/icomoon.eot?o0lwr6#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?o0lwr6') format('truetype'),
    url('fonts/icomoon.woff?o0lwr6') format('woff'),
    url('fonts/icomoon.svg?o0lwr6#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: auto; /*変更*/
}

[class^="fa-"], [class*=" fa-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-times:before {
  content: "\e900";
}
.fa-times-circle:before {
  content: "\e901";
}
.fa-qrcode:before {
  content: "\e938";
}

/* li {
  margin-bottom: 10px;
} */

/* 以下 Font Awesomeのall.cssからコピー*/

.fa,
.fas,
.far,
.fal,
.fad,
.fab {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1; }

.fa-lg {
  font-size: 1.33333em;
  line-height: 0.75em;
  vertical-align: -.0667em; }

.fa-fw {
  text-align: center;
  width: 1.25em; }

.fa-ul {
  list-style-type: none;
  margin-left: 2.5em;
  padding-left: 0; }
  .fa-ul > li {
    position: relative; }

.fa-li {
  left: -2em;
  position: absolute;
  text-align: center;
  width: 2em;
  line-height: inherit; }
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

0

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

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

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?o0lwr6');
  src:  url('fonts/icomoon.eot?o0lwr6#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?o0lwr6') format('truetype'),
    url('fonts/icomoon.woff?o0lwr6') format('woff'),
    url('fonts/icomoon.svg?o0lwr6#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: auto;
}

.fa,
.fas,
.far,
.fal,
.fad,
.fab {
  font-family: 'icomoon' !important;
  font-weight: normal;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  vertical-align: -.0667em;
  line-height: 1; }

.fa-lg {
  font-size: 1.33333em; }

.fa-xs {
  font-size: .75em; }

.fa-sm {
  font-size: .875em; }

.fa-1x {
  font-size: 1em; }

.fa-2x {
  font-size: 2em; }

.fa-3x {
  font-size: 3em; }

.fa-4x {
  font-size: 4em; }

.fa-5x {
  font-size: 5em; }

.fa-6x {
  font-size: 6em; }

.fa-7x {
  font-size: 7em; }

.fa-8x {
  font-size: 8em; }

.fa-9x {
  font-size: 9em; }

.fa-10x {
  font-size: 10em; }

.fa-fw {
  text-align: center;
  width: 1.25em; }

.fa-ul {
  list-style-type: none;
  margin-left: 2.5em;
  padding-left: 0; }
  .fa-ul > li {
    position: relative; }

.fa-li {
  left: -2em;
  position: absolute;
  text-align: center;
  width: 2em;
  line-height: inherit; }


  /* アイコン */
  .fa-times:before {
    content: "\e900";
  }
  .fa-times-circle:before {
    content: "\e901";
  }
  .fa-qrcode:before {
    content: "\e902";
  }
  .fa-qrcode1:before {
    content: "\e938";
  }
  .fa-exit:before {
    content: "\ea14";
  }

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

line-heightを調整すればよいのでは?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/08 15:40

    アドバイスありがとうございました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.98%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる