ons-icon

実例

Icon

ons-icon element renders a icon.

Tutorial contents will be added soon.

関連情報

名前 型 / デフォルト値 概要
icon String

The icon name. "md-" prefix for Material Icons, "fa-" for Font Awesome and "ion-" prefix for Ionicons. See all available icons on the element description (at the top). Icons can also be styled based on modifier presence. Add comma-separated icons with "modifierName:" prefix. The code <ons-icon icon="ion-edit, material:md-edit"></ons-icon> will display "md-edit" for Material Design and "ion-edit" as the default icon. fa- prefix is added automatically if none is provided. Check See also section for more information.

(翻訳中)
Optional.
size String

The sizes of the icon. Valid values are lg, 2x, 3x, 4x, 5x, or in the size in pixels. Icons can also be styled based on modifier presence. Add comma-separated icons with "modifierName:" prefix. The code:

  <ons-icon
    icon="ion-edit"
    size="32px, material:24px">
  </ons-icon>

will render as a 24px icon if the "material" modifier is present and 32px otherwise.

(翻訳中)
Optional.
rotate Number アイコンを回転して表示します。90, 180, 270から指定できます。 Optional.
fixed-width Boolean
false
When used in a list, you want the icons to have the same width so that they align vertically by defining this attribute. (翻訳中) Optional.
spin アイコンを回転するかどうかを指定します。 Optional.
名前 概要
fixedWidth When used in a list, you want the icons to have the same width so that they align vertically by defining this attribute. (翻訳中)
spin アイコンを回転するかどうかを指定します。

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。