Als ich das letzte Mal auf der Entwickler-Website war, fiel mir auf, dass die am zweithäufigsten nachgefragte Funktion darin bestand, benutzerdefinierte Symbole in den Modellierer zu importieren. Von außen betrachtet sieht es vielleicht so aus, als ob man einfach eine Schriftart hinzufügen kann und es funktioniert. Daher dachte ich, es wäre hilfreich zu zeigen, wie man das mit reinem CSS macht, damit wir als Community die Grundlage dafür legen können, dass es in Zukunft als Funktion hinzugefügt wird. Mendix Versionen. Wenn Sie wissen, wie Sie Ihre eigenen benutzerdefinierten Symbole erstellen, können Sie Symbole an viel mehr Stellen hinzufügen, als der Modellierer die Platzierung der aktuellen Glyphikons zulässt.

Um einem Projekt einen benutzerdefinierten Symbolsatz hinzuzufügen, sind zwei Kernelemente erforderlich: eine Symbolschriftart und eine CSS/Sass-Datei, die alle Klassen abbildet.

Symbol Schriftart

Wählen oder erstellen Sie Ihre Symbolschriftart:

Im Internet sind eine ganze Reihe kostenloser Symbolschriftarten verfügbar. Einige wie Font Awesome sind kostenlos und fast gebrauchsfertige Schriftdateien mit CSS. Einige sind nur die Schriftdateien und andere sind SVG- oder Illustrator-Dateien. Beginnen wir mit der individuellsten Option: Sie haben einige SVG-Symbole, die Sie in Ihrem Projekt verwenden möchten. Dazu müssen Sie Ihre eigene Symbolschriftart auf Websites wie erstellen. Icomoon.

Hier sind ein paar Tutorials die Sie durch die Einzelheiten führen Erstellen Sie Ihre eigene Symbolschriftart von Grund auf. Wenn Sie Ihre eigene Symbolschriftart erstellen, erhalten Sie nicht nur eine gebrauchsfertige Schriftart, sondern es wird auch die CSS-Datei mit den erforderlichen Klassen für Sie zugeordnet.

Benötigte Dateien:

Sobald Ihre Symbolschriftart erstellt ist, müssen Sie sicherstellen, dass Sie die Schriftart in mehreren Schriftdateitypen haben. Sie benötigen diese, damit sie mit jedem Browser funktioniert. Beispielsweise funktioniert .eot am besten für Internet Explorer, aber .woff funktioniert am besten für Chrome. Glücklicherweise können Sie den Schriftartkonverter von Font Squirrel verwenden, um alle diese Dateien zu erstellen. Speichern Sie die Schriftdateien in einem Ordner neben dem CSS-Ordner, um einfache Dateipfade zu erhalten.

CSS/SASS-Datei und Zeichenzuordnung

Wenn Sie eine Symbolschriftart gefunden und alle erforderlichen Schriftdateien erstellt haben, diese jedoch nicht in einem Dienst wie Icomoon erstellt haben, kann der nächste Schritt etwas mühsam sein. Hier können wir als Community gegenseitig profitieren.

Für jeden Icon-Schriftsatz sollten Sie jede Icon-CSS-Datei erstellen, wir benötigen 3 Elemente. Für das folgende Beispiel werde ich die Sass-Syntax verwenden, damit es mit dem verbunden werden kann Mendix UI-Framework, und ich verwende Linearicons, eine klare Symbolschriftart.

Importieren Sie zunächst Ihre Schriftdateien mit @font-face. Die Syntax sollte folgendermaßen aussehen:

@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'); font-weight: normal;
font-style: normal;
}

Zweitens erstellen Sie eine Klasse, die die verwendete Schriftart deklariert, und legen Sie grundlegende Stile wie Schriftgröße, Anzeige, Positionierung, Zeilenhöhe usw. fest. Im Fall von Linearicons verwende ich die Klasse .lnr. In den meisten Fällen, wenn Sie Icons mit Mendix, Sie möchten, dass das Symbol dem Text oder der Schaltfläche vorangestellt wird. Aus diesem Grund müssen Sie die Eigenschaften in der Pseudoklasse :before platzieren. Auf diese Weise können Sie mehrere Symbolschriftarten verwenden und sie haben alle eindeutige Benennungsklassennamen.

.lnr {
&: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;
}
}

Zuletzt müssen Sie Klassennamen für jedes Zeichen erstellen. Die meisten dieser Namen sind in den Symbolschriftarten häufig bereits vordefiniert. Für jedes Zeichen sollte ein Klassenname vorhanden sein.

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

Wie in Schritt 2 gezeigt, wird die Zeichenklasse in die Pseudoklasse :before eingefügt. Wenn Sie möchten, dass das Symbol rechts neben dem Text angezeigt wird, können Sie zusätzliche Klassendeklarationen erstellen, um dies zu ermöglichen. Sie benötigen sowohl eine anfängliche Klassendeklaration als auch Zeichenzuordnungen wie:

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

und

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

Integrieren Sie neue Symbole in Ihr Projekt

Nachdem alle Klassen gespeichert wurden, müssen Sie Ihren SCSS-Teil in der Ordnerstruktur des UI-Frameworks speichern. Für dieses Beispiel verwende ich das Vanilla-Design als Ordnerstruktur, falls Sie es nachvollziehen möchten.

1. Es ist sinnvoll, es unter einem bestimmten Namen zu speichern, z. B. _linear-icons.scss, damit Sie es leicht abrufen und für andere Projekte wiederverwenden können
2. A den Teil in den Ordner theme > lib > project
3. Öffnen Sie die Datei lib.scss im Thema >lib
4. Fügen Sie am Ende der Datei die Zeile „@import folder/linear-icons;“ hinzu.
5. Stellen Sie sicher, dass Koala oder andere Sass-Compiler die Dateien überwachen, sodass die Symbole beim Speichern zu Ihrem Projekt hinzugefügt werden.

Benutzerdefinierte Symbole im Modeler verwenden

Die Verwendung Ihrer neuen Symbole ist so einfach wie die Verwendung jeder anderen Klasse. Als CSS-Klassen können Sie die Symbole überall dort hinzufügen, wo die Klasseneigenschaft im Modeler vorhanden ist. Um Ihre benutzerdefinierte Klasse zu verwenden, müssen Sie sowohl die Symbolschriftartdeklaration als auch das Zeichen hinzufügen, das Sie verwenden möchten.

Ich habe die Linearicon-CSS und -Schriftarten zum Download beigefügt, damit Sie sie als Vorlage für die Erstellung Ihrer eigenen Symbolschriftartensätze verwenden können.