カスタムアイコンをインポートする方法 Mendix

ラッセル・ハイト
2016 年 8 月 3 日
分読み

前回開発者向け Web サイトにアクセスしたときに、2 番目にリクエストが多かった項目は、モデラーにカスタムアイコンをインポートすることだと気づきました。外から見ると、フォントを追加するだけで機能するように見えるかもしれません。そこで、純粋な CSS でこれを行う方法を示すと役立つと考えました。そうすれば、コミュニティとして、将来的に機能として追加するための基礎を築くことができます。 Mendix バージョン。独自のカスタムアイコンを作成する方法を理解することで、モデラーが現在のグリフアイコンを配置できる場所よりも多くの場所にアイコンを追加できます。

プロジェクトにカスタムアイコンセットを追加するには、アイコンフォントとすべてのクラスをマッピングする CSS/Sass ファイルという 2 つのコア要素が必要です。

アイコンフォント

アイコンフォントを選択または作成します。

インターネット上には、無料のアイコンフォントが数多くあります。Font Awesome など、無料で、CSS が含まれたフォントファイルがほぼそのまま使えるものもあります。フォントファイルだけのものもあれば、SVG や Illustrator のファイルもあります。最もカスタムなオプションから始めましょう。プロジェクトで使用したい SVG アイコンがいくつかあります。これを行うには、次のような Web サイトで独自のアイコンフォントを作成する必要があります。アイコムーン.

ここにいくつかのチュートリアルがありますの細部まで解説します独自のアイコンフォントをゼロから作成する独自のアイコンフォントを作成すると、すぐに使用できるフォントが手に入るだけでなく、必要なクラスを含む CSS ファイルもマッピングされます。

必要なファイル:

アイコンフォントを作成したら、フォントを複数のフォントファイルタイプとして用意する必要があります。すべてのブラウザーで動作させるには、これらが必要です。たとえば、.eot は Internet Explorer に最適ですが、.woff は Chrome に最適です。幸い、Font Squirrel のフォントコンバーターを使用して、これらすべてのファイルを作成できます。ファイルパスを簡単にするために、フォントファイルを css フォルダーの隣のフォルダーに保存します。

フォントリス

CSS/SASS ファイルと文字マッピング

アイコンフォントを見つけて、必要なフォントファイルをすべて作成したものの、Icomoon などのサービスで作成していない場合、次のステップは少し面倒になる可能性があります。ここで、コミュニティとして、お互いにメリットを得ることができます。

アイコンフォントセットごとに、アイコンCSSファイルを作成する必要があります。これには3つの要素が必要です。以下の例では、Sass構文を使用して接続します。 Mendix UI フレームワークで、鮮明なアイコンフォントである Linearicons を使用します。

まず、@font-face を使用してフォントファイルをインポートします。構文は次のようになります。

@font-face {
font-family: 'Linearicons-Free';
src:url('../fonts/Linearicons-Free.eot?w118d');
src:url('../fonts/Linearicons-Free.eot?#iefixw118d') format('embedded-opentype'),
url('../fonts/Linearicons-Free.woff2?w118d') format('woff2'),
url('../fonts/Linearicons-Free.woff?w118d') format('woff'),
url('../fonts/Linearicons-Free.ttf?w118d') format('truetype'),
url('../fonts/Linearicons-Free.svg?w118d#Linearicons-Free') format('svg');&nbsp;font-weight: normal;
font-style: normal;
}

次に、使用しているフォントを宣言するクラスを作成し、フォントサイズ、表示、配置、行の高さなどの基本スタイルを設定します。Lineariconsの場合は、クラス.lnrを使用しています。 Mendix、アイコンをテキストまたはボタンの前に配置したい場合、:before 疑似クラスにプロパティを配置する必要があります。この方法では、複数のアイコンフォントを使用でき、それらすべてに一意の命名クラス名が付けられます。

.lnr {
&amp;:before {
display: inline-block;
font-family: 'FontAwesome';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
vertical-align: middle;
margin-right: 0;
margin-top: 0;
font-size: 1.5em;
line-height: inherit;
-moz-osx-font-smoothing: grayscale;
}
}

最後に、各文字のクラス名を作成する必要があります。多くの場合、アイコンフォントでは、このほとんどが事前に定義されています。各文字にはクラス名が必要です。

.lnr-home:before {
content: "\e800";
}

ステップ 2 に示すように、文字クラスは :before 疑似クラスに配置されます。アイコンをテキストの右側に表示したい場合は、これに対応するために追加のクラス宣言を作成できます。次のような初期クラス宣言と文字マップの両方が必要になります。

.lnr-a{
&amp;:after{
…
}
}

の三脚と

.lnr-home-a:after {
content: "\e800";
}

プロジェクトに新しいアイコンを統合する

すべてのクラスを保存したら、UI フレームワークフォルダー構造内に SCSS 部分を保存する必要があります。この例では、フォルダー構造として Vanilla テーマを使用しています。

_linear-icons.scss などの特定の名前で保存すると、簡単に取り出して他のプロジェクトで再利用できるので便利です。
テーマ > lib > プロジェクトフォルダに部分的に移動します
テーマ >lib の lib.scss ファイルを開きます。
ファイルの下部に「@import folder/ linear-icons;」という行を追加します。
アイコンを保存するとプロジェクトに追加されるよう、ファイルを監視している Koala またはその他の Sass コンパイラがインストールされていることを確認してください。

ss2