Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann

Die Foren sind geschlossen. Für Fragen zu MR, NOF & mehr steht Tommys Forum zur Verfügung. Ich danke für die langjährige Treue und Mitarbeit! Eure Administratorin.

Position Icons - Mobirise 5.2.0.
#1
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


Angehängte Dateien
.png  Bildschirmfoto 2020-11-15 um 13.49.03.png (Größe: 190,27 KB / Downloads: 48)

Alle Beiträge dieses Benutzers finden
#2
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
Alle Beiträge dieses Benutzers finden
#3
Moin,

... und willkommen bei uns im Forum :hallo:

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:

Zitat:<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.


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


P.S.:

Die Style - Anweisung, die Jonny beschreibt, kann ich gerade nicht sehen.
Alle Beiträge dieses Benutzers finden
#4
Sorry,

sehe gerade, dass Du das Icon links stehen haben willst :eek:

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

Dann natürlich umgekehrt - also das <span> davor setzen ...
Alle Beiträge dieses Benutzers finden
#5
Ähm.... Die Icons stehen doch immer links neben dem Text. Huh
Alle Beiträge dieses Benutzers finden
#6
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!


.png  2020-11-15.png (Größe: 304,08 KB / Downloads: 37)
Alle Beiträge dieses Benutzers finden
#7
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:
&nbsp;

... besser eben ein "margin" (Außenabstand), wie bereits von Mobirise in der class="mbr-iconfont" definiert.
Alle Beiträge dieses Benutzers finden
#8
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
Alle Beiträge dieses Benutzers finden
#9
@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! :headbash:
Alle Beiträge dieses Benutzers finden
#10
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.
Alle Beiträge dieses Benutzers finden


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Umstieg auf Mobirise 5 nof15us 67 3.946 16.12.2020, 10:53
Letzter Beitrag: Tommy Herrmann
  NOF 12 und Mobirise kombinieren Petergun 14 515 11.12.2020, 07:50
Letzter Beitrag: Petergun
  Mobirise-MP3 Player einbinden. Soundcloud? Thomas Saake 11 475 08.12.2020, 17:16
Letzter Beitrag: Thomas Saake
  Mobirise-Drop Down Menü verschiedene Farben Thomas Saake 8 315 08.12.2020, 14:42
Letzter Beitrag: Thomas Saake
  Mobirise-Text unter Logo Menüleiste Thomas Saake 14 533 03.12.2020, 17:22
Letzter Beitrag: Thomas Saake
  Mobirise-Noch ein Problem mit Hamburger Menü auf Handy Thomas Saake 23 726 30.11.2020, 16:54
Letzter Beitrag: Thomas Saake
  Mobirise-PopUp Modal Text statt Kreuz zum schließen Thomas Saake 3 231 26.11.2020, 15:43
Letzter Beitrag: Thomas Saake
  Mobirise-Timeline Abstand verringern Thomas Saake 2 161 26.11.2020, 14:10
Letzter Beitrag: Thomas Saake
  Mobirise-Abstand Google Maps Thomas Saake 11 562 08.11.2020, 22:25
Letzter Beitrag: AndyNeu
  Mobirise-Dreifach Rahmen Thomas Saake 12 520 07.11.2020, 15:12
Letzter Beitrag: Thomas Saake



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!