web-dev-qa-db-ja.com

Bootstrap 4でFont Awesomeを使用する

Bootstrap 4で開発し、一連のボタンを作成するときに同じサイズを取得する唯一の方法である異なるサイズのボタンを取得するFont Awesomeボタンを作成しようとしたときに見つかった主要な問題ボタンはそれぞれに同じフォントを使用するため、問題はFont Awesomeのサイズがすべてのフォントで同じではないためです。

      <a class="btn btn-outline-warning" type="button" href="#">
        <i class="fa fa-edit"></i>
      </a>

      <a class="btn btn-outline-danger" type="button" href="#">
        <i class="fa fa-trash"></i>
      </a>

この問題を解決する実用的な例はありますか？

csstwitter-bootstrapbootstrap-4font-awesome
6
Med Karim Garali

Font Awesomeアイコンのフォントサイズは手動で調整できますが、それほど劇的ではないアプローチをお勧めします：.fa-fw。これは、フォントの幅を統一するのに役立つFont Awesomeのスタイルシートの一部であるユーティリティクラスです。 4.7.0のドキュメントごと：

fa-fwを使用して、アイコンを固定幅に設定します。アイコンの幅が異なると整列がずれる場合に使用すると便利です。ナビゲーションリストやリストグループなどで特に便利です。

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<a class="btn btn-outline-warning" href="#">
  <i class="fa fa-fw fa-edit"></i>
</a>

<br>

<a class="btn btn-outline-danger" href="#">
  <i class="fa fa-fw fa-trash"></i>
</a>

<br>

<a class="btn btn-outline-success" href="#">
  <i class="fa fa-fw fa-wrench"></i>
</a>

<br>

<a class="btn btn-outline-info" href="#">
  <i class="fa fa-fw fa-stop"></i>
</a>

上記の例では、.fa-fwがアイコンの間隔をどのように調整し、すべてが同じように見えるかを確認できます。ただし、アンカータグからtype="button"も削除したことに気付くかもしれません。これはBootstrap宣言しているban-outline-*の完全なCSSを適用していないためです。

6
Robert

名前が示すように、アイコンは「装飾された」フォントにすぎません。そのため、インラインCSSを使用してサイズを変更できます。または、さらに良いのは、外部CSSスタイルシートを使用することです。

次を入力して、faクラスを変更できます。

.fa{
    font-size: 15px !important;
}

15pxを適切なものに変更するだけです。 pxを使用するだけでなく、emも使用できます。また、BootstrapのCSSスタイルシートエントリをオーバーライドするために!importantを含めるようにしてください。

次のように、特定のクラスを入力して特定のアイコン/フォントを変更することもできます。

fa fa-edit{
    font-size: 15px !important;
}

あなたがあなた自身のテーマの作者であれば、スタイルシートがどのように機能するか、優先度などを知っていると確信しています。そうでない場合は、最初に Child Theme を作成してからテーマのみ。親テーマを変更する場合、テーマ作成者が更新をリリースすると、変更は上書きされます。

0
Craig