Gibt es eine Möglichkeit eine eigene Icon-Bibliothek zu erstellen ohne font-awesome zu verwenden?
Hi @Torsten_Utz,
DE: kommt auf den Einsatzbereich an, aber generell kannst du jede beliebige Icon Bibliothek verwenden die du möchtest. Persönlich bin ich mittlerweile auch von FontAwesome zu Phosphor-Icons geswitched. Sind kostenlos und decken sehr viel ab.
Generell gilt:
Wenn du custom icons in themes verwenden möchtest, solltest du sie ins theme einfügen. Sei es als SVG, CSS oder icon-font.
Für die Verwendung als modul icon muss das Icon als SVG hochgeladen werden,
Als icon in Fließtext, Button etc. kannst du entweder wie von FA gewohnt mit HTML-Elemente und Klassen
{# Beispiel für Phosphor icons #}
<i class="ph-light ph-ICON-NAME"></i>
oder eigenen Klassen und bspw. content-attribut
{# Beispiel für Phosphor Icons #}
@font-face {
font-family: "Phosphor-Thin";
src:
url("{{ get_asset_url('./../fonts/phosphor-thin/Phosphor-Thin.woff2') }}") format("woff2"),
url("{{ get_asset_url('./../fonts/phosphor-thin/Phosphor-Thin.woff') }}") format("woff"),
url("{{ get_asset_url('./../fonts/phosphor-thin/Phosphor-Thin.ttf') }}") format("truetype"),
url("{{ get_asset_url('./../fonts/phosphor-thin/Phosphor-Thin.svg') }}") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}
...
.myClass:after{
content:'\eab2';
font-family: 'Phosphor-Light';}
arbeiten.
Du kannst aber auch diverse online services nutzen um eigene icon Familien zu erstellen.
EN: depends on the application, but in general you can use any icon library. Personally, I also switched from FontAwesome to Phosphor Icons. They are free and cover a wide range.
Generally speaking:
If you want to use custom icons in themes, you should add them to the theme. Be it as SVG, CSS or icon font.
For use as a module icon, the icon must be uploaded as an SVG,
For icons in body text, buttons, etc., you can either use HTML elements and classes, as is the case with FA
{# Example for Phosphor icons #}
<i class="ph-light ph-ICON-NAME"></i>
or with your own classes and e.g. content attributes for example.
{# Example for Phosphor Icons #}
@font-face {
font-family: "Phosphor-Thin";
src:
url("{{ get_asset_url('./../fonts/phosphor-thin/Phosphor-Thin.woff2') }}") format("woff2"),
url("{{ get_asset_url('./../fonts/phosphor-thin/Phosphor-Thin.woff') }}") format("woff"),
url("{{ get_asset_url('./../fonts/phosphor-thin/Phosphor-Thin.ttf') }}") format("truetype"),
url("{{ get_asset_url('./../fonts/phosphor-thin/Phosphor-Thin.svg') }}") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}
...
.myClass:after{
content:'\eab2';
font-family: 'Phosphor-Light';}
You can also use various online services to create your own icon families.
best,
Anton
Hallo @Anton nochmal,
die Frage bezieht sich auch darauf wie ich bei Modulen im Symbol-Feld eine andere Bibliotheken verwenden kann. Dort wird ja nur font-awesome angeboten.
Oder gibt es eine andere Möglichkeit ein ähnliches Auswahlfeld im Moduleditor anzubieten?
Beste Grüße
Hi @Torsten_Utz,
DE: wenn du custom icons in Modulen verwenden willst, hast du folgende Möglichkeiten:
- Bild-uploader (File-Manager)
- Text-Feld zur Eingabe des Icon Namens
- Dropdown/Select zur Auswahl von vordefinierten Icon Namen
- Eine Mischung aus den vorherigen Möglichkeiten
Bild-Uploader
Sicherlich die einfachste Möglichkeit, allerdings in diesem Fall nicht zu empfehlen.
Text-Feld
Super einfach und super schnell. Hierzu die custom Icon-Font wie vorab beschrieben ins Theme einbauen, im Modul ein Text-Feld hinzufügen(kein Rich-text) und den code wie folgt schreiben(kann je nach icon-font variieren)
<i class="ph-light ph-{{ module.icon_name|cut('ph-') }}"></i>
Der “cut” filter ist optional, kann aber hilfreich sein.
Dropdown/Choice/Select Option
Wenn du den Anwendern nur bestimmte Optionen zur Verfügung stellen möchtest, ist dies eine super Option. Hierbei ist zu beachten, dass der Icon name als value gesetzt werden muss.
Also bspw:
| Values | Label |
|---|---|
| arrow-right | Arrow right |
| arrow-left | Arrow left |
Der Code im Modul sieht dann wie folgt aus:
<i class="ph-light ph-{{ module.icon_name }}"></i>
Mischung aus diesen Optionen
Mein persönlicher go-to Ansatz, da es erfahrungsgemäß die beste UX bietet.
Bei diesem Ansatz kannst du ein Choice/Select Feld verwenden um
- vordefinierte Icons anzuzeigen
- custom Icons anzuzeigen
Ich empfehle ein Choice/Select Feld mit “predefined” und “custom” zu erstellen um die jeweiligen Optionen anzeigen zu lassen, wenn die entsprechende Option ausgewählt wurde.
Der Code kann wie folgt aussehen:
{% set icon_choice = module.icon_choice %}
{% if icon_choice == "predefined" %}
{% set icon == module.predefine_icons %}
{% elif icon_choice == "custom" %}
{% set icon == module.custom_icon %}
{% endif %}
...
<i class="ph-light ph-{{icon|cut('ph-')}}"></i>
Modul icon:
Wenn du das Modul icon zu etwas anderem als einem FontAwesome icon ändern möchtest, hast du nur die upload Möglichkeit
Bonus 1:
Eigene SVG Makro Datei. Etwas, was oft nicht bedacht wird ist, dass man ein Makro mit den diversen SVG codes für die Icons erstellen und im Modul importieren kann.
Eine solche Datei kann wie folgt aussehen:
{% macro custom_icon(name) %}
{% if name == "icon_name_a" %}
<svg ...></svg>
{% elif name == "icon_name_b"%}
<svg ...></svg>
...
{% endif %}
{% endmacro %}
Im Modul baut man die Datei dann wie folgt ein:
{% from "PFAD-ZUR-DATEI" import custom_icon %}
der eigentliche Code im Modul ist dir überlassen. Ich empfehle aber die Choice/Select Option zu nutzen
| Value | Label |
|---|---|
| icon_name_a | Icon A |
| icon_name_b | Icon B |
der Modul code schaut dann beispielsweise wie folgt aus:
{% from "PFAD-ZUR-DATEI" import custom_icon %}
{% set icon_name = module.icon_name %}
...
<img src="{{ custom_icon(icon_name) }}">
EN: If you want to use custom icons in modules, you have the following options:
- Image uploader (File Manager)
- Text field for entering the icon name
- Dropdown/Select for choosing predefined icon names
- A combination of the previous options
Image Uploader
Certainly the easiest option, but not recommended in this case.
Text Field
Super simple and super quick. To do this, integrate the custom icon font as previously described into the theme, add a text field (not rich-text) in the module, and write the code as follows (this may vary depending on the icon font):
<i class="ph-light ph-{{ module.icon_name|cut('ph-') }}"></i>
The “cut” filter is optional but can be helpful.
Dropdown/Choice/Select Option
If you want to provide users with only specific options, this is a great choice. Note that the icon name must be set as the value.
For example:
| Values | Label |
|---|---|
| arrow-right | Arrow right |
| arrow-left | Arrow left |
The code in the module would look like this:
<i class="ph-light ph-{{ module.icon_name }}"></i>
best,
Anton
Combination of these options
My personal go-to approach, as it generally provides the best UX.
With this approach, you can use a Choice/Select field to
- display predefined icons
- show custom icons
I recommend creating a Choice/Select field with “predefined” and “custom” options to display the respective options when the corresponding choice is selected.
The code could look like this:
{% set icon_choice = module.icon_choice %}
{% if icon_choice == "predefined" %}
{% set icon = module.predefine_icons %}
{% elif icon_choice == "custom" %}
{% set icon = module.custom_icon %}
{% endif %}
...
<i class="ph-light ph-{{icon|cut('ph-')}}"></i>
Module Icon:
If you want to change the module icon to something other than a FontAwesome icon, you only have the upload option.
Bonus 1:
Custom SVG Macro File. Often overlooked is that you can create a macro with various SVG codes for the icons and import it into the module.
Such a file could look like this:
{% macro custom_icon(name) %}
{% if name == "icon_name_a" %}
<svg ...></svg>
{% elif name == "icon_name_b"%}
<svg ...></svg>
...
{% endif %}
{% endmacro %}
In the module, you can integrate the file as follows:
{% from "PATH-TO-FILE" import custom_icon %}
The actual code in the module is up to you, but I recommend using the Choice/Select option
| Value | Label |
|---|---|
| icon_name_a | Icon A |
| icon_name_b | Icon B |
The module code would then look something like this:
{% from "PATH-TO-FILE" import custom_icon %}
{% set icon_name = module.icon_name %}
...
<img src="{{ custom_icon(icon_name) }}">
Hallo @Anton,
gibt es bei deinen Lösungen eine Möglichkeit die Icons als Vorschau anzuzeigen?
Hi @Torsten_Utz ,
DE:
leider ist mir keine “Echtzeit” Vorschau Möglichkeit bekannt.
Du kannst zwar versuchen, den kompletten SVG Code eines icons als Label einzufügen, jedoch bezweifle ich, dass dies funktionieren wird.
Ich löse so etwas, in dem ich den link zu allen Icons als Inline Help-Text zum jeweiligen Element(Text/dropdown…) hinzufüge.
Für FontAwesome wäre der Inline Help Text beispielsweise dieser:
Eine Auflistung aller möglichen Icons findest du in der <a href="https://fontawesome.com/search" target="_blank">FontAwesome Bibliothek</a>
Für Phosphor-Icons dieser
Eine Auflistung aller möglichen Icons findest du in der <a href="https://phosphoricons.com/#toolbar" target="_blank">Phosphor-Icons Bibliothek</a>
Ich empfehle ein target=“_blank” Attribut beim Link, da sich die der Link dadurch in einem neuen Tab öffnet und man nicht aus der Bearbeitung der Seite rausgeschmissen wird.
EN:
Unfortunately, I’m not aware of any “real-time” preview option.
You could try inserting the entire SVG code of an icon as a label, but I doubt it will work.
I handle such situations by adding the link to all icons as inline help text next to the respective element (text, dropdown, etc.).
For FontAwesome, for example, the inline help text would be:
A list of all available icons can be found in the <a href="https://fontawesome.com/search" target="_blank">FontAwesome library</a>
For Phosphor Icons, it would be:
A list of all available icons can be found in the <a href="https://phosphoricons.com/#toolbar" target="_blank">Phosphor-Icons library</a>
I recommend using a target=“_blank” attribute in the link, as this opens the link in a new tab and prevents the user from being taken out of the page editing view.
best,
Anton