Icons durch eigene PNG ersetzen

Allgemeine Fragen
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Icons durch eigene PNG ersetzen

Ungelesener Beitrag von inno »

Hallo, ist es möglich die ICONS von Mobirise durch eigene PNGs zu ersetzen?
Screen anbei.
Grüsse
screen.jpg
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Icons durch eigene PNG ersetzen

Ungelesener Beitrag von Tommy Herrmann »

Moin,

... es ist zwar gerade nur schwer vorstellbar, dass man bei all den Icons, insbesondere wenn man das "Gesamt Paket" erworben hat, da nicht das Icon seiner Träume finden könnte (mehr als 9.000 Icons zusätzlich), aber Du kannst natürlich immer auch eigene Grafiken einsetzen, wie mal hier als Beispiel die beiden Flaggen oben in der Navi meiner Testseite:

https://mobirise-tutorials.com/Testseit ... ware-Ende/

Z.B. der Code für meine deutsche Flagge:

Code: Alles auswählen

<img style="max-height: 11px;" src="https://www.mobirise-tutorials.com/Testseiten/Software-Ende/de.png" alt="Flagge" title="Deutsch" height="11" width="16">
Diese Grafik "de.png" habe ich dann zuvor mit einem externen FTP-Programm auf meinen Server geladen und dann darauf mittels absoluter URL verlinkt, sonst meckert Mobirise bei einer relativen Pfadangabe, da alle relativen Links über Mobirise geprüft werden und Mobirise dann diese Grafik nicht in seiner Projekt-Datei verzeichnet hätte.

Die Icon-Sets von Mobirise bestehen ja aus CSS-Dateien, die auf "Unicode Icons" basieren und nicht etwa auf Grafiken.

Diese Icons setzt Mobirise, anhand ihrer in der CSS-Datei definierten Namen, ein. So z.B. diese "Lupe mit + Symbol":

mobi-mbri-zoom-in
CSS hat geschrieben:
<span class="mobi-mbri mobi-mbri-zoom-in mbr-iconfont mbr-iconfont-btn"></span>
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: Icons durch eigene PNG ersetzen

Ungelesener Beitrag von inno »

... ich stehe gerade auf dem Schlauch, wo muss ich was ersetzen? :angst:
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Icons durch eigene PNG ersetzen

Ungelesener Beitrag von Tommy Herrmann »

Ich gehe davon aus, dass Du die Mobirise-Erweiterung "Code Editor" bereits (möglichst als "Gesamt-Paket" aller Erweiterungen) käuflich erworben hast.

... sonst kannst Du gar nichts machen. Man benötigt immer diesen "Code Editor" um am Quellcode etwas zu ändern.

Dann füge doch mal (irgendwo) diese Image-Tag (Bilder-Code) zum Testen im "HTML Code" des "Code Editors" zu meiner Flagge ein. Dann wird diese, an der Stelle der Einfügung, in Deiner Seite erscheinen.

Code: Alles auswählen

<img style="max-height: 11px;" src="https://www.mobirise-tutorials.com/Testseiten/Software-Ende/de.png" alt="Flagge" title="Deutsch" height="11" width="16">
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: Icons durch eigene PNG ersetzen

Ungelesener Beitrag von inno »

... das habe ich! Ich möchte drei Icons im Header ersetzen. Leider sehe ich im Quelltext nicht wo die Icons sind?? ...
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Icons durch eigene PNG ersetzen

Ungelesener Beitrag von Tommy Herrmann »

... ich kann sie auch nicht ohne einen Link zu Deiner Seite sehen :D :blind:

Poste doch mal einen Link - damit man besser helfen kann. Ich weiß ja nicht auswendig, was das von Deinem Screenshot für ein Block aus welchem Thema ist. Im Quelltext der Seite könnte man das aber sofort sehen.

Deswegen hatte ich oben den Code, den Mobirise für die Icons verwendet, ja schon (vorsorglich) geschrieben. Diese Icons von Mobirise stehen in den "<span>" Tags.

Natürlich sieht der Inhalt von diesem <span> bei Dir etwas anders aus, da der natürlich - je nach CSS Class - immer etwas variiert. Jedes Icon hat ja seinen eigenen Namen. Meist sind diese Icons doch auch an einem Button platziert, dessen Beschriftung Du kennst und einfach finden solltest. Gleich daneben ist dann diese <span> Class mit dem Icon zu finden.

Bei Deinem Block (aus dem Screenshot oben) ist z.B. ja dieses Icon mit der Uhr über der Schrift "Contact forms" - das sollte doch ganz schnell zu finden sein.

Suche doch einfach mal nach "icon" im Quelltext und Du wirst alle Fundstellen sehen.

Übrigens kann man auch im Mobirise "Code Editor" suchen, indem man in einen Bereich klickt (linke Bereich "HTML Editor" oder rechte Bereich "CSS Editor") und dann mit der Tasten-Kombination "Strg + F" die Suchen-Option oben öffnet.

Am ? Fragezeichen (oben rechts im "Code Editor") findest Du eine Erklärung der möglichen Tastatur-Kombinationen.


Suchen:

Code-Editor Suchen.JPG

Fundstellen werden markiert:

Code-Editor highlighted.JPG
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 27 Gäste