ダウンロード

ここから始める

機能

Sassツール

カスタマイズ

CSSライブラリ

CSSヘルパー

スポンサー

Password.link

Icon

Font Awesome 5 を含むすべてのアイコンフォントライブラリと互換性があります。

icon 要素は、あらゆるタイプのアイコンフォントのコンテナです。アイコンの読み込みに数秒かかる場合があり、アイコンが占めるスペースを制御したい場合は、ページ読み込み時にページが「ジャンプ」するのを防ぐ信頼性の高い正方形のコンテナとして icon クラスを使用できます。

例

HTML 

<span class="icon">
  <i class="fas fa-home"></i>
</span>
黄色の背景は、アイコンコンテナの領域を強調表示するためのデモンストレーションのみを目的としています。

デフォルトでは、icon コンテナは 正確に 1.5rem x 1.5rem を占有します。アイコン自体のサイズは、使用しているアイコンライブラリに応じて調整されます。たとえば、Font Awesome 5 のアイコンはフォントサイズを継承します。

アイコンテキスト #

すべてのテキスト内側が独自の span 要素でラップされている限り、icon-text ラッパーを使用して、icon とテキストを組み合わせることができます。

例

ホーム

HTML 

<span class="icon-text">
  <span class="icon">
    <i class="fas fa-home"></i>
  </span>
  <span>Home</span>
</span>

必要なだけ多くの icon 要素とテキスト要素を組み合わせることができます。

例

パリ ブダペスト ブカレスト イスタンブール

HTML 

<span class="icon-text">
  <span class="icon">
    <i class="fas fa-train"></i>
  </span>
  <span>Paris</span>
  <span class="icon">
    <i class="fas fa-arrow-right"></i>
  </span>
  <span>Budapest</span>
  <span class="icon">
    <i class="fas fa-arrow-right"></i>
  </span>
  <span>Bucharest</span>
  <span class="icon">
    <i class="fas fa-arrow-right"></i>
  </span>
  <span>Istanbul</span>
  <span class="icon">
    <i class="fas fa-flag-checkered"></i>
  </span>
</span>

icon-text は inline-flex 要素であるため、テキストの段落内に簡単に挿入できます。

例

夕食 の招待状がすぐに発送されました。ベネット夫人が家事に貢献する予定のコースを計画していたところ、すべてを延期する回答が届きました。ビングリー氏は、翌日 町 にいる必要があり、その結果、彼らの 招待状 などを受け入れることができませんでした。

ベネット夫人は非常に困惑しました。彼はハートフォードシャーに 到着 した直後に、なぜそんなに早く町に用事があるのか想像できませんでした。そして彼女は、彼が常に場所から場所へと 飛び回る 可能性があり、ネザーフィールドに落ち着くべきだと恐れ始めました。

HTML 

<div class="content">
  <p>
    An invitation to
    <span class="icon-text">
      <span class="icon">
        <i class="fas fa-utensils"></i>
      </span>
      <span>dinner</span>
    </span>
    was soon afterwards dispatched; and already had Mrs. Bennet planned the
    courses that were to do credit to her housekeeping, when an answer arrived
    which deferred it all. Mr. Bingley was obliged to be in
    <span class="icon-text">
      <span class="icon">
        <i class="fas fa-city"></i>
      </span>
      <span>town</span>
    </span>
    the following day, and, consequently, unable to accept the honour of their
    <span class="icon-text">
      <span class="icon">
        <i class="fas fa-envelope-open-text"></i>
      </span>
      <span>invitation</span> </span
    >, etc.
  </p>

  <p>
    Mrs. Bennet was quite disconcerted. She could not imagine what business he
    could have in town so soon after his
    <span class="icon-text">
      <span class="icon">
        <i class="fas fa-flag-checkered"></i>
      </span>
      <span>arrival</span>
    </span>
    in Hertfordshire; and she began to fear that he might be always
    <span class="icon-text">
      <span class="icon">
        <i class="fas fa-plane-departure"></i>
      </span>
      <span>flying</span>
    </span>
    about from one place to another, and never settled at Netherfield as he
    ought to be.
  </p>
</div>

また、<div> タグを代わりに使用するだけで、icon-text を flex 要素に変えることもできます。

例

情報

パッケージは火曜日の08:00に配達されます。

成功

画像が正常にアップロードされました。

警告

プロファイルの詳細に一部の情報が欠落しています。

危険

送信中にエラーが発生しました。もう一度お試しください。

HTML 

<div class="icon-text">
  <span class="icon has-text-info">
    <i class="fas fa-info-circle"></i>
  </span>
  <span>Information</span>
</div>

<p class="block">
  Your package will be delivered on <strong>Tuesday at 08:00</strong>.
</p>

<div class="icon-text">
  <span class="icon has-text-success">
    <i class="fas fa-check-square"></i>
  </span>
  <span>Success</span>
</div>

<p class="block">Your image has been successfully uploaded.</p>

<div class="icon-text">
  <span class="icon has-text-warning">
    <i class="fas fa-exclamation-triangle"></i>
  </span>
  <span>Warning</span>
</div>

<p class="block">
  Some information is missing from your <a href="#">profile</a> details.
</p>

<div class="icon-text">
  <span class="icon has-text-danger">
    <i class="fas fa-ban"></i>
  </span>
  <span>Danger</span>
</div>

<p class="block">
  There was an error in your submission. <a href="#">Please try again</a>.
</p>

色 #

アイコンフォントは単なるテキストなので、カラーヘルパーを使用してアイコンの色を変更できます。

例

HTML 

<span class="icon has-text-info">
  <i class="fas fa-info-circle"></i>
</span>
<span class="icon has-text-success">
  <i class="fas fa-check-square"></i>
</span>
<span class="icon has-text-warning">
  <i class="fas fa-exclamation-triangle"></i>
</span>
<span class="icon has-text-danger">
  <i class="fas fa-ban"></i>
</span>

icon-textにも同じことが当てはまります。

例

情報 成功 警告 危険

HTML 

<span class="icon-text has-text-info">
  <span class="icon">
    <i class="fas fa-info-circle"></i>
  </span>
  <span>Info</span>
</span>

<span class="icon-text has-text-success">
  <span class="icon">
    <i class="fas fa-check-square"></i>
  </span>
  <span>Success</span>
</span>

<span class="icon-text has-text-warning">
  <span class="icon">
    <i class="fas fa-exclamation-triangle"></i>
  </span>
  <span>Warning</span>
</span>

<span class="icon-text has-text-danger">
  <span class="icon">
    <i class="fas fa-ban"></i>
  </span>
  <span>Danger</span>
</span>

サイズ #

Bulma icon コンテナには 4つのサイズがあります。常に、含まれているアイコンよりもわずかに大きくする必要があります。たとえば、Font Awesome 5 のアイコンは、デフォルトで 1em のフォントサイズを使用しますが (フォントサイズを継承するため)、追加のサイズを提供します。

コンテナクラス コンテナサイズ Font Awesome 5 クラス アイコンサイズ 結果
icon is-small 1rem x 1rem fas 1em
icon 1.5rem x 1.5rem fas 1em
fas fa-lg 1.33em
icon is-medium 2rem x 2rem fas 1em
fas fa-lg 1.33em
fas fa-2x 2em
icon is-large 3rem x 3rem fas 1em
fas fa-lg 1.33em
fas fa-2x 2em

Font Awesome のバリエーション #

Font Awesome は、次のための修飾子クラスも提供します。

  • 固定幅アイコン
  • 境界線付きアイコン
  • アニメーションアイコン
  • スタックアイコン
タイプ Font Awesome クラス 結果
固定幅 fas fa-fw
境界線付き fas fa-border
アニメーション fas fa-spinner fa-pulse
スタック 
<span class="icon is-medium">
  <span class="fa-stack fa-sm">
    <i class="fas fa-circle fa-stack-2x"></i>
    <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
  </span>
</span>
 
<span class="icon is-large">
  <span class="fa-stack fa-lg">
    <i class="fas fa-camera fa-stack-1x"></i>
    <i class="fas fa-ban fa-stack-2x has-text-danger"></i>
  </span>
</span>

Material Design Icons #

icon コンテナをMaterial Design Iconsで使用する方法を次に示します。

コンテナクラス コンテナサイズ MDIクラス アイコンサイズ 結果
icon is-small 1rem x 1rem mdi 1em
icon 1.5rem x 1.5rem mdi mdi-18px 18px
mdi mdi-24px 24px
icon is-medium 2rem x 2rem mdi 1em
mdi mdi-18px 18px
mdi mdi-24px 24px
mdi mdi-36px 36px
icon is-large 3rem x 3rem mdi 1em
mdi mdi-18px 18px
mdi mdi-24px 24px
mdi mdi-36px 36px
mdi mdi-48px 48px

MDI は、次のための修飾子クラスも提供します。

  • ライトおよびダークアイコン
  • 回転および反転アイコン
タイプ Material Design Icon クラス 結果
明るい色 mdi mdi-light
暗い色 mdi mdi-dark
ライト非アクティブ色 mdi mdi-light mdi-inactive
ダーク非アクティブ色 mdi mdi-dark mdi-inactive
反転 mdi mdi-flip-h
mdi mdi-flip-v
回転 mdi mdi-rotate-45
mdi mdi-rotate-90
mdi mdi-rotate-180

Ionicons #

icon コンテナをIoniconsで使用する方法を次に示します。

コンテナクラス コンテナサイズ Ionicon クラス アイコンサイズ 結果
icon is-small 1rem x 1rem ion-ionic 1em
icon 1.5rem x 1.5rem ion-ionic 1em
icon is-medium 2rem x 2rem ion-ionic 1em
icon is-large 3rem x 3rem ion-ionic 1em

SassとCSS変数 #

Sass変数
CSS変数
値
 
$icon-dimensions
 
var(--bulma-icon-dimensions)
 
1.5rem
 
$icon-dimensions-small
 
var(--bulma-icon-dimensions-small)
 
1rem
 
$icon-dimensions-medium
 
var(--bulma-icon-dimensions-medium)
 
2rem
 
$icon-dimensions-large
 
var(--bulma-icon-dimensions-large)
 
3rem
 
$icon-text-spacing
 
var(--bulma-icon-text-spacing)
 
0.25em

Bulmaをサポートする方法

1回限りの寄付

スポンサーをご覧ください

月額寄付

スポンサーになる
#native_company# #native_desc#
#native_cta#