Link im Text + ICON
Link im Text + ICON
Hallo, kann man zu einem Textlink im Fließtext noch ein Icon einfügen?
- Tommy Herrmann
- Site Admin
- Beiträge: 5833
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Link im Text + ICON
Moin,
ja klar - das geht überall wo Du willst.
Beispiel:
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/
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 <a href="https://www.mobirise-tutorials.com/Tutorial-Links/"
class="text-primary" target="_blank">Übersicht
<span class="fa fa-external-link mbr-iconfont mbr-iconfont-btn"></span></a></p>
<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/
Re: Link im Text + ICON
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 ?
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 ?
Gruss
Reinhard
Reinhard
- Tommy Herrmann
- Site Admin
- Beiträge: 5833
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Link im Text + ICON
... 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
Wozu braucht man noch mehr Icons als Mobirise ohnehin schon anbietet (keine Ahnung) - das sind fast 10.000 Icons
Re: Link im Text + ICON
Steht doch dort auch beschrieben
Einfach mittels
Code: Alles auswählen
<span class="mbri-search"></span>
Brauchst auch nicht runter laden, hat MR schon alle drin und wird auch automatisch an die Textgröße angepasst wenn man das einbaut.
Gruß Volker
Re: Link im Text + ICON
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 ?
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 ?
Gruss
Reinhard
Reinhard
- Tommy Herrmann
- Site Admin
- Beiträge: 5833
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Link im Text + ICON
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:
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:
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:
<span class="fa fa-external-link mbr-iconfont mbr-iconfont-btn" style="font-size: 24px; color: rgb(255, 0, 0);">
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:
Tommy Herrmann hat geschrieben: ↑Mi 5. Apr 2023, 15:33
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";
}
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);">
Re: Link im Text + ICON
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
- Site Admin
- Beiträge: 5833
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Link im Text + ICON
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.
Re: Link im Text + ICON
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.
Gruss
Reinhard
Reinhard
Wer ist online?
Mitglieder in diesem Forum: Ahrefs [Bot], Bing [Bot] und 13 Gäste