CookBook

IM-BloomMaker Bulmaエレメントに使用するアイコンの探し方

投稿日:

このCookBookでは、 intra-mart Accel Platform 2020 Summer から利用可能になったコンテンツ種別「Bulma」で使用できるアイコンについて説明いたします。

IM-BloomMakerのコンテンツ種別「Bulma」のエレメントに設定するアイコンは、Font Awesome に定義されているアイコンとなり、Font Awesome に定義されているアイコンのうち、BloomMakerで使用できるのは free のアイコンとなります。

Font Awesome とは、Webサイトやスマートフォンアプリ用のアイコンライブラリです。
多くのアイコンが登録されており、アイコンの一覧は こちら から確認できます。

以下で手順を説明します。
※ 本CookBookでは、アイコンエレメントを例に説明します。

レシピ

  1. BloomMakerのデザイナ画面でアイコンエレメントを配置します。
  2. Font Awesomeのページから用途に合ったアイコンを検索します。
  3. アイコンエレメントにFont Awesomeで探したアイコンを設定します。

1. BloomMakerのデザイナ画面でアイコンエレメントを配置します。

パーツ(Bulma)からIcon エレメントをドラッグ&ドロップか、ダブルクリックで配置します。

2. Font Awesomeのページから用途に合ったアイコンを検索します。

今回は●印のアイコンを検索します。

Font Awesome のアイコン一覧を開きます。
Font Awesome

検索ボックス(Search と表示されているテキストボックス)に検索キーを入力します。

今回は●印のアイコンとなるので検索ボックスに「circle」と入力します。

設定したいアイコンをダブルクリックします。

アイコンの詳細が表示されます。

画面上部にある、class をコピーします。

3. アイコンエレメントにFont Awesomeで探したアイコンを設定します。

アイコンエレメントの iconClass プロパティにFont Awesomeのページでコピーした class をペーストします。

さいごに

本CookBookでは、Bulmaのアイコンエレメントをベースに説明していますが、以下のエレメントも同様にFont Awesomeに定義されているアイコンを使用します。
1. フォーム部品(Bulma) - フィールド - フィールドヘルプ
2. フォーム部品(Bulma) - フィールド - 入力規則エラーメッセージ
3. フォーム部品(Bulma) - テキスト入力 - テキスト入力要素
4. フォーム部品(Bulma) - 数値入力 - 数値入力要素
5. フォーム部品(Bulma) - パスワード入力 - パスワード入力要素
6. フォーム部品(Bulma) - メールアドレス入力 - メールアドレス入力要素
7. フォーム部品(Bulma) - 電話番号入力 - 電話番号入力要素
8. フォーム部品(Bulma) - 日付入力 - 日付入力要素
9. フォーム部品(Bulma) - プルダウン - プルダウン要素
10. フォーム部品(Bulma) - ボタン
11.コンポーネント(Bulma) - パンくずリストコンテナ - パンくずリストリンクアイテム

以上で、完了です。

-CookBook

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

スクリプト開発した画面にバリデーション(入力チェック)を実装する

このCookBookでは、作成した画面項目に対してバリデーション(入力チェック)を設定する方法をご紹介します。 今回はスクリプト開発で登録フォームを作成するで作成した画面項目に対して、クライアントサイ …

no image

スクリプト開発でのCSRF対策(formタグ編)

Cross Site Request Forgery(CSRF)とは、閲覧者に不正にHTTPリクエストを送信させ、攻撃者の意図した処理を実行させる攻撃手法です。 このCookBookでは、スクリプト開 …

no image

OAuth2.0 の アクセストークンを Google から取得する方法

このクックブックでは、OAuth2.0 の アクセストークンを Google から取得する方法を説明します。 intra-mart Accel Platformでは、OAuth2.0 の アクセストー …

IM-LogicDesignerを利用して、申請日が一定期間経過した特定フローの完了案件をアーカイブする

このCookBookでは、LogicDesignerを利用して、申請日が一定期間経過した特定フローの完了案件をアーカイブする方法について紹介しています。 完成イメージ 1. サンプルのロジックフローを …

IM-BloomMaker 「ファイルアップロード」エレメントの利用方法

このCookBookでは、 2020 Spring でリリースした「ファイルアップロード」エレメントの利用方法について説明していきます。 登録画面でアップロードしたファイルを別画面でダウンロードするこ …