Link im Text + ICON

[inno]

Hallo, kann man zu einem Textlink im Fließtext noch ein Icon einfügen?

[Tommy Herrmann]

Moin,

ja klar - das geht überall wo Du willst.

Beispiel:

Code: Alles auswählen

<p class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7">
Eine&nbsp;<a href="https://www.mobirise-tutorials.com/Tutorial-Links/" 
class="text-primary" target="_blank">Übersicht&nbsp;
<span class="fa fa-external-link mbr-iconfont mbr-iconfont-btn"></span></a></p>

Hier habe ich dieses Icon als <span> Tag </span> dazu geschrieben (so wie Mobirise das auch z.B. bei seinen Buttons tut):

<span class="fa fa-external-link mbr-iconfont mbr-iconfont-btn"></span>


Wie das Icon heißt - hier fa-external-link - kannst Du ja zunächst z.B. an einem Button ausprobieren und dann diesen Bereich vom <span> Tag </span> raus kopieren.

Das kannst Du hier am Text-Link:

"Übersicht"

mal sehen:

https://www.mobirise-tutorials.com/Tutorials/

[struggle]

Hallo,

ich habe dazu mal eine Frage, es geht um iconfonts. Unter folgender Adresse

https://mobiriseicons.com/

kann man sich ja iconfonts herunterladen. Mir gefällt das, daß man entsprechendes im Text einfügen kann. Und wenn ich das richtig verstanden habe, könnte man die SVG Fonts auch als Bild verwenden.

Nun habe ich mir die Fonts heruntergeladen. Wie installiere ich die Fonts bitte, so daß ich sie auf meiner Webseite verwenden kann ?

[Tommy Herrmann]

... sorry - ich kenne diese Seite nicht und ich weiß auch nicht mal ob die von Mobirise ist - auf jeden Fall ist sie veraltet.

Wozu braucht man noch mehr Icons als Mobirise ohnehin schon anbietet (keine Ahnung) - das sind fast 10.000 Icons

[Volker]

Nun habe ich mir die Fonts heruntergeladen. Wie installiere ich die Fonts bitte, so daß ich sie auf meiner Webseite verwenden kann ?

Steht doch dort auch beschrieben

Einfach mittels

Code: Alles auswählen

<span class="mbri-search"></span>

an der Stelle einfügen wo es stehen soll
Brauchst auch nicht runter laden, hat MR schon alle drin und wird auch automatisch an die Textgröße angepasst wenn man das einbaut.

[struggle]

Hallo Tommy,
ich will nicht mehr Icons haben, sondern welche, die ich im Text einfügen kann. Wenn das mit allen Icons geht, ist das ja gut, ich weiß bloß nicht, wie ?

[Tommy Herrmann]

Moin,

aber das hatte ich doch gerade einen Beitrag zuvor für "Inno" hier oben in diesem Board beschrieben und Volker hat das auch nochmals beschrieben:

Hier habe ich dieses Icon als <span> Tag </span> dazu geschrieben (so wie Mobirise das auch z.B. bei seinen Buttons tut):

<span class="fa fa-external-link mbr-iconfont mbr-iconfont-btn"></span>

Wie das Icon heißt - hier fa-external-link - kannst Du ja zunächst z.B. an einem Button ausprobieren und dann diesen Bereich vom <span> Tag </span> raus kopieren.

Das kannst Du hier am Text-Link:

"Übersicht"

mal sehen:

https://www.mobirise-tutorials.com/Tutorials/

Wie gesagt, das ist nur ein <span> Bereich mit verschiedenen CSS-Klassen, in denen das Icon erstellt wurde und dann angezeigt wird. Für diese Icons gibt es eigene, ziemlich große CSS-Dateien von Mobirise. Hier z.B. diese CSS-Datei, in der dieses Icon fa-external-link gegründet wird:

Code: Alles auswählen

.fa-external-link:before {
  content: "\f08e";
}

So steht diese CSS in einer der vielen CSS-Dateien für die Icons - hier mal diese Datei "font-awesome.css" als Beispiel:

https://www.mobirise-tutorials.com/Tuto ... wesome.css



Mein Beispiel von oben:

<span class="fa fa-external-link mbr-iconfont mbr-iconfont-btn"></span>

Wie das Icon heißt - hier fa-external-link (für "Font-Awesome externer Link") - kannst Du ja zunächst z.B. an einem Button ausprobieren, indem Du das Icon im "Icon Editor" von Mobirise wählst:

... und dann diesen Bereich vom <span> Tag </span> im "Code Editor" raus kopieren.

Wo immer Du dieses <span> Tag </span> im Text hin kopierst, wird das gewählte Icon dann angezeigt. Kopiert man es innerhalb eines Links rein, also in ein <a> Tag </a>, wird es mit verlinkt - wie in meinem Beispiel-Code oben.


Die Größe und Farbe des Icons kannst Du auch beeinflussen - so z.B. das gleiche Icon in 24px Größe und in der Farbe Rot:

Code: Alles auswählen

<span class="fa fa-external-link mbr-iconfont mbr-iconfont-btn" style="font-size: 24px; color: rgb(255, 0, 0);">

<span class="fa fa-external-link mbr-iconfont mbr-iconfont-btn" style="font-size: 24px; color: rgb(255, 0, 0);">

[inno]

Hi Tommy, man kann auch auf das ICON klicken und dann ein neues auswählen! Dann spart man sich den Schritt mit dem Button! ;-)

[Tommy Herrmann]

Ja klar - man muss eben nur erst einmal irgendwo ein Icon haben - und an einem Button hat Mobirise das eben per Default vorgesehen - im Text nicht.

[struggle]

Also, ich weiß nicht, warum ich die Vorgehensweise kompliziert gemacht habe. Es ist wirklich einfach, ein Icon im Text oder auch im Textlink einzufügen. Es paßt sich auch dem Text an. Und dabei eignet sich "Font Awesome" wirklich hervorragend. Und wie inno schon schrieb, Icon einfach tauschen, wenn man will.