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: