Position Icons - Mobirise 5.2.0.

[Markus78]

Hallo zusammen!

Ich nutze Mobirse 5.2.0. und bei Einsatz von noramlen Buttons in Kombination mit deinem Icon wird dies immer wie folgt dargestellt:

Text dann Icon.

Ich hätte gerne im Button die Reihenfolge geändert. Also erst das Icon und dann der Text.

Wie kann ich dies umsetzen?
Vielen Dank für die Hilfe vorab!

Grüße, Markus

[jonny]

Hallo Markus und willkommen im Forum,

ja das kannst du per css einstellen. Im Code Editor findest du im CSS Bereich irgendwo die Klasse von dem Button.

.btn { ........... }

dort eingebunden sollte irgendwas mit

.mbr-iconfont {
    order: 1;
  }

stehen

mit einer "0" setzt du das Icon vor den Text.

Viele Grüße
Christian

[Tommy Herrmann]

Moin,

... und willkommen bei uns im Forum

Mobirise generiert ein <span> (Bereich) Tag vor dem Textlink im Button.

Wenn Du das dahinter (also rechts) haben möchtest, dann schneidest Du am besten im "Code Editor" diesen ganze <span> (was z.B. so ähnlich wie mein Beispiel unten aussehen kann) aus und schreibst noch einen Abstand nach links als Style-Tag dazu und fügst es dann nach dem Textlink im Button wieder ein:

<span style="margin-left: 0.5rem;" class="icon54-v1-cookie-man mbr-iconfont mbr-iconfont-btn"></span>

Also würde in meinem Beispiel der gesamte Button mit dem Icon (rechts) dann so aussehen.

Code:

<a class="btn btn-md btn-white-outline" href="index.html#cookies" data-app-placeholder="Type Text">Cookies<span style="margin-left: 0.5rem;" class="icon54-v1-cookie-man mbr-iconfont mbr-iconfont-btn"></span></a>

... im Übrigen lässt sich ein Icon so auch an beliebiger Stelle einer Seite verwenden.


 Icon_Rechts.jpg (Größe: 356,43 KB / Downloads: 32)


P.S.:

Die Style - Anweisung, die Jonny beschreibt, kann ich gerade nicht sehen.

[Tommy Herrmann]

Sorry,

sehe gerade, dass Du das Icon links stehen haben willst

Da steht es doch normalerweise - was für ein Thema verwendest Du?

Dann natürlich umgekehrt - also das <span> davor setzen ...

[Thomas Saake]

Ähm.... Die Icons stehen doch immer links neben dem Text.

[Martin73]

Entferne innerhalb des <span class="mobi-mbri mobi-mbri-clock mbr-iconfont mbr-iconfont-btn"></span> die class mbr-iconfont und setze vor den Text ein Leerzeichen!


 2020-11-15.png (Größe: 304,08 KB / Downloads: 28)

[Tommy Herrmann]

Martin,

diese Class sollte besser nicht entfernt werden, denn die macht ja viel mehr als den Abstand und genau dieser (benötigte) Abstand wird ja bereits in der class="mbr-iconfont" definiert:

Code:

.mbr-iconfont {
  margin-right: 0.8rem;
}

Die ist auch für Farbe, Größe, Hover und auch ein anderes Verhalten am Handy zuständig.

Leerzeichen sollte man gar nicht verwenden - wenn überhaupt dann geschützte Leerzeichen als:

Code:

 

... besser eben ein "margin" (Außenabstand), wie bereits von Mobirise in der class="mbr-iconfont" definiert.

[immergut]

Moin,

Ich habe es bei mir wie folgt gelöst (Vorraussetzung ist natürlich der HTML-Editor von Mobirise!)

Im Text des Buttons (an der Stelle, wo du den ICON im Text/vor dem Text/nach dem Text haben möchtest) einfach eingefügt ...

Code:

<p style="font-size:30px">🚒</p>

dem Feuerwehrauto / Fire Engine entspricht der Code: "&#x1F692;"

das "font-size" um die Größe anzupassen.

Den ICON habe ich von hier
https://werner-zenk.de/html/unicode-tabelle.php

[Martin73]

@Tommy: Die Klasse mbr-iconfont definiert doch, wie Du oben geschrieben hast, den rechten Außenabstand. Das setzt doch das Icon nicht automatisch nach rechts.
Es stellt sich doch die Frage, warum man bei diesen Buttons/bei diesem Theme die Icons nur rechts einfügen kann. Wo wird das festgesetzt?
@immergut: So geht es natürlich, weil man die Mobirise-Methode mit den Klassen (Icons) umgeht.
Ich habe aber noch keine Lösung.

Update:
Es ist die Eigenschaft "order" in der Klasse mbr-iconfont! Diese steht auf "1". Man kann sie auf "0" oder "unset" oder "reverse" setzen, muss aber noch "margin-left: 0.5rem;" in "margin-right: 0.5rem;" ändern!

Das hat Christian (jonny) oben schon geschrieben!

[Tommy Herrmann]

Deswegen hatte ich ja (oben) nach dem Thema gefragt - bei mir (im Standard-Thema "Mobirise4") stehen andere CSS-Klassen.

... solange Markus sich hier nicht äußert ist aber eine weitere Überprüfung für mich nicht relevant.