Icon Font erweitern

[mark]

Hallo Tim,
gibt es von eurer Seite her einen richtigen Weg, den ihr empfehlt um das Icon-Set zu erweitern?
z.B. auch wenn ich nur ein svg zur Verfügung habe, dieses gerne im Icon-Set einfacher für den Kunden einfacher zur Verfügung zu stellen

[Tim]

Hi,
der Iconpicker erlaubt in den Systemeinstellungen eigene CSS Dateien und Klassen "einzuhängen".

[mark]

Wenn ich nun mein eigenes Logo in den Iconpicker einbinden möchte. Wie wäre da mein Ansatz?
Ich hab das Logo als svg.

Ich hab das Logo über die icomoon-seite zu einem Fontset erstellt.
Das ganze hab ich hochgeladen.
Unter einstellungen geb ich dem IconPicker die neue css-Datei.

Wenn ich den Iconpicker auswähle zeigt er mir die neue css-Datei an aber keine Icons zur Auswahl.
muss noch etwas angepast werden?

[Tim]

Der Icon-Picker ist eigentlich für font-icons konzipiert und im Grunde setzt der nur eine CSS Klasse ein. Auch schaut der IP standardmäßig nur nach "icon"... Klassen. Die eigene Klasse muss ebenfalls in den Einstellungen übergeben werden.
Es müssen natürlich sämtliche Pfade zur svg etc. stimmen. Die browserconsole sagt hier, wenn was fehlt.

[mark]

Servus Tim,
ich brauch glaub doch noch bisschen Unterstützung.
Ich habe auf der Seite https://icomoon.io/app/#/select ein eigenes svg hochgeladen.
Generate font... und hab dann ein eigenes Font-Set erzeugt bekommen. Mit einem Icon. Das hab ich mal in den Anhang geladen.

Die CSS-Datei habe ich ein wenig bearbeitet, da das Icon 4mal da drin stand.
Anstatt ".icon-marker1 .path1:before" hab ich dann ".icon-marker1:before" gemacht.

Die css-Datei in den Einstellungen dem Iconpicker übergeben.

Wenn du nun auf den Link gehst, findest du unter Produkte das Icon 2mal.

Der HTML-Aufbau ist komischerweise auch anders.

Richtig: <i class="fa fa-user"></i>

<span>Über uns</span>

Falsch
<span>Produkte</span>

Denke beim Iconpicker sieht das noch ok aus

[mark]

Ich hab diesen Link gefunden.
https://rocksolidthemes.com/de/conta...ns-hinzufuegen
Ich weiß nicht ob man da genauso machen kann.
Beim export des Fontset, bin ich mir dann mit den Einstellungsoptionen nicht sicher.
Der Inhalt der svg ist danach nicht identisch.
Kann das trotzdem funktionieren?

[Tim]

Man braucht kein eigenes Font-Set erstellen.
Der IP schaut nach Klassen und setzt diese dann ein. Damit bekommt das Element später im Frontend die besagte Klasse. Im Grunde das gleiche, als gäbe man die Klasse in das CSS-ID / Klasse Feld ein.

[mark]

Das mit der Klasse hab ich kapiert. Wenn man den iconpicker benutzt wird ja die Klasse darüber eingefügt.
Nur wie ich ein weiteres neues Icon einbinden kann, versteh ich nicht.
Wie muss die svg Datei aussehen?
Oder passt das wie in Post 5!??

[mark]

Evtl gibt es ja auch eine Möglichkeit in die vorhandenden Font-Dateien eine Zeile einzufügen um mein eigenes Icon dort einfügen zu können?

[mark]

Hallo Tim,
folgendes ist mir aufgefallen:

Wenn ich zusätzlich ein eigenes Font-Set über die Einstellungen eingebunden habe, wird in der Navi <i class="fa fa-home"></i> nicht angelegt.
Dafür bekommt die li und a Klasse icon-marker1 und somit das falsche Ergebnis. Muss ich noch etwas im System ändern damit dieser die Klassen über den Icon Picker richtig anwendet???

<ol class="inner">
<li class="mlist demo_transporter_tds float_left sibling first">

<a class="a-level_1 demo_transporter_tds float_left sibling first nav-icon" title="Startseite" href="">
<i class="fa fa-home"></i>

<span>Startseite</span>


</a>


</li>


<li class="mlist active submenu demo_transporter_tds float_left icon-marker1">

<a class="a-level_1 active submenu demo_transporter_tds float_left icon-marker1" title="Produkte" href="index.php/produkte.html">
<span>Produkte</span>


</a>

[mark]

Ich hab nun mal in meinem separatem Font-Set den Namen geändert in fa-marker.
Also in der svg-Datei und der css-Datei
Nun wird das Icon in Front- und Backend nicht mehr angezeigt, sondern nur das Kästchen mit dem unicode.
Wenn ich nun das Icon der Seite zuweise, wird zumindest das Icon an der richtigen Stelle platziert und das HTML-Code sieht richtig aus.

Wie findet das System nun mein Icon????

[mark]

Oder ein ganz anderer Ansatz:
Wenn du eine Vektorgrafik hast, diese willst du mit dem iconpicker ausgeben.
Z.b. Als naviicon, oder in nem Kasten.

Wie würdest du vorgehen?

[Tim]

Ich würde den Iconpicker dafür nicht beauftragen. Ich würde einfach nur eine Klasse im CSS vorsehen und diese dann im Backend vergeben.
Für ein einziges neues Icon wäre mir der Weg den IP zu öffnen, das icon zu suchen bzw. suchen zu lassen und den IP wieder zu schließen viel zu aufwendig. Ich würde bei 10 Icons erst beginnen.

[mark]

Hallo Tim,
es kann gut sein, dass ich zu doof dafür bin.
Ich habe jetzt hier mit einer Klasse über css ein Icon eingefügt. Leider ist das nun viel kleiner als die anderen. Ich bekomm es aber auch nicht auf die Größe der anderen.
Gemeint ist der Laster bei DISPO.

Ich versteh aber trotzdem noch immer nicht, warum es in den Einstellungen die Möglichkeit gibt neue Icons hinzuzufügen, wenn diese dann nicht genauso einfach genutzt werden können wie die Standard installierten.

[Tim]

Naja, muss halt auch richtig gestylt werden. Ein Bild in content wird nicht klappen. Bilder sind background Definitionen.

I

ch versteh aber trotzdem noch immer nicht, warum es in den Einstellungen die Möglichkeit gibt neue Icons hinzuzufügen, wenn diese dann nicht genauso einfach genutzt werden können wie die Standard installierten.

Auch hier sind ein paar Regeln zu beachten. Ich hänge eine Beispiel CSS einmal an:

.myIcons-1:before
{
    background:url("../img/logo.png") no-repeat;
background-size:100%,
    position: relative;
    display: inline-block;
    width: 50px; height: 50px;
    content: " ";
}

Iconpicker: