Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


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: 30)

Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#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
Diese Nachricht in einer Antwort zitieren
#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: 25)


P.S.:

Die Style - Anweisung, die Jonny beschreibt, kann ich gerade nicht sehen.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#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 ...
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Ähm.... Die Icons stehen doch immer links neben dem Text. Huh
Gruß
Thomas

Mobirise 5.2. + Code Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#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: 20)
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#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.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#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
mfg.
|---------------------------------
|Glück ist ... kein Pech zu haben.
|---------------------------------
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#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:
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#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.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Mobirise-Abstand Google Maps Thomas Saake 11 306 08.11.2020, 22:25
Letzter Beitrag: AndyNeu
  Mobirise-Dreifach Rahmen Thomas Saake 12 342 07.11.2020, 15:12
Letzter Beitrag: Thomas Saake
  Mobirise-QR-Code Verlinkung auf Textblock Thomas Saake 3 126 04.11.2020, 13:51
Letzter Beitrag: jonny
  Umstieg auf Mobirise 5 nof15us 63 2.560 27.10.2020, 10:24
Letzter Beitrag: andiko
  Newsbox in Mobirise RB_BCC 33 745 26.10.2020, 17:58
Letzter Beitrag: RB_BCC
  Mobirise Business Möglichkeiten Reves84 3 133 20.10.2020, 11:17
Letzter Beitrag: kfz-fotograf
  Mobirise Beispiele nof15us 11 279 14.10.2020, 10:39
Letzter Beitrag: Tommy Herrmann
  Integriertes Suchfeld in Mobirise Reves84 13 721 10.10.2020, 11:49
Letzter Beitrag: Tommy Herrmann
  Mobirise Email login incorrect Utz29 8 280 02.10.2020, 07:58
Letzter Beitrag: Tommy Herrmann
  Mobirise-Shop einfügen Thomas Saake 0 129 29.09.2020, 10:32
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!