Icon-Font und svg-Icons in HTML einbinden

Code zum Üben und Nachschlagen wie man Icon-Fonts und SVG-Icons in HTML einsetzen kann, zum Beispiel auf eigenen Seiten oder in Plugins.

In Xobor-Foren mit Template V6 und in der mobilen Ansicht von V1 bis V4 sind Icon-Fonts schon vorhanden.
Hilfe findet man im Wiki unter https://www.hpm-support.de/wiki:icons-v6.
In den Templates V1 bis V4 kann man Vektor-Icons mit SVG einsetzen.

Diese Icons sind Vektor-Grafiken und lassen sich in Plugins mit configVar verlustfrei beliebig verkleinern und vergrößern. Auch die Farbe lässt sich mit configVar einstellen, so dass die Admins in den Plugin-Einstellungen Größe und Farbe selber einstellen können für die Icons, die vom Plugin verwendet werden.

Demo Foren-Icons und svg-Icons

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
 
<!--
// Code zum ueben und nachschlagen wie man Icon-Fonts und SVG-Icons
// in HTLM einsetzen kann.
// In Xobor Foren mit Template V6 und in der mobile Ansicht von V1 bis V4
// sind Icon-Fonts schon vorhanden. Hilfe findet man im Wiki unter
// https://www.hpm-support.de/wiki:icons-v6
// In den Templates V1 bis V4 kann man Vektor Icons mit svg einsetzen die
// man mit css formatieren kann
//
// Autor: Mike48
// Anschauen: https://www.friends-of-xobor.de/test_svg_use.html
//
-->
<style>
{{template==177.start}}
/* begin - style fuer V6 */
.txt_box_1 .xob.xob-attach,
.txt_box_3 .xob.xob-attach {
font-size: 24px;
color: black;
}
.txt_box_2 .xob.xob-attach,
.txt_box_4 .xob.xob-attach {
color: blue;
font-size: 24px;
}
.txt_box_1 .xob.xob-attach:focus,
.txt_box_1 .xob.xob-attach:hover,
.txt_box_3 .xob.xob-attach:focus,
.txt_box_3 .xob.xob-attach:hover {
font-size: 28px;
color: red;
}
.txt_box_2 .xob.xob-attach:focus,
.txt_box_2 .xob.xob-attach:hover,
.txt_box_4 .xob.xob-attach:focus,
.txt_box_4 .xob.xob-attach:hover {
font-size: 28px;
color: green;
}
.txt_box_1 .xob.xob-attach:active,
.txt_box_3 .xob.xob-attach:active {
font-size: 24px;
color: #FF00FF;
}
.txt_box_2 .xob.xob-attach:active,
.txt_box_4 .xob.xob-attach:active {
font-size: 24px;
color: #FF00FF;
}
/* end - style fuer V6 */
{{template==177.end}}
 
{{template!==177.start}}
/* begin - style fuer V1 bie V4 */
#svg_lager .svg-icon {
fill: currentColor;
width: 24px;
height: 24px;
}
#tmp_1 .svg-icon,
#tmp_3 .svg-icon {
fill: black;
width: 24px;
height: 24px;
}
#tmp_2 .svg-icon,
#tmp_4 .svg-icon {
fill: blue;
width: 24px;
height: 24px;
}
#tmp_1 .svg-icon:focus,
#tmp_1 .svg-icon:hover,
#tmp_3 .svg-icon:focus,
#tmp_3 .svg-icon:hover {
fill: red;
width: 26px;
height: 26px;
}
#tmp_2 .svg-icon:focus,
#tmp_2 .svg-icon:hover,
#tmp_4 .svg-icon:focus,
#tmp_4 .svg-icon:hover {
fill: green;
width: 26px;
height: 26px;
}
#tmp_1 .svg-icon:active,
#tmp_3 .svg-icon:active {
fill: #FF00FF;
width: 24px;
height: 24px;
}
#tmp_2 .svg-icon:active,
#tmp_4 .svg-icon:active {
fill: #FF00FF;
width: 24px;
height: 24px;
}
{{template!==177.end}}
.icon_box {
margin-left: 10em;
border: 2px solid black;
padding: 2em;
}
.inline {
display: inline-block;
vertical-align: middle;
height: 3em;
padding-right: 2em;
}
.text_box {
margin-top: 2em;
}
/* end - style fuer V1 bie V4 */
</style>
 
{{template==177.start}}
<!--
icon-font Büroklammer im V6
Wird formatiert wie Text
-->
 
<!-- begin - versteckter lager-ordner für die svg daten -->
<div id="svg_lager" style="display: none">
<span class="xob xob-attach">
</div>
<!-- end - versteckter lager-ordner für die svg daten -->
 

<div class="icon_box">
<h3>Für V6 mit Icon-Font</h3>
<div class="txt_box_1">
<div class="inline">Hier erscheint die Büroklammer: <span class="xob xob-attach"></span></div>
</div>
 
<div class="txt_box_2">
<div class="inline">Hier erscheint die Büroklammer: <span class="xob xob-attach"></span></div>
</div>
</div>
 
<div class="icon_box">
<h3>Für V6 mit Icon-Font einfügen mit JS/JQ</h3>
<div class="txt_box_3">
<div class="inline">Hier erscheint die Büroklammer: </div>
</div>
 
<div class="txt_box_4">
<div class="inline">Hier erscheint die Büroklammer: </div>
</div>
</div>
 
{{footerjs.start}}
{{footerjs}}
/*
* svg mit JQuery einfuegen
* script in footer
*/
$('#svg_lager .xob.xob-attach').clone().appendTo('.txt_box_3 .inline');
$('#svg_lager .xob.xob-attach').clone().appendTo('.txt_box_4 .inline');
{{footerjs.end}}
{{template==177.end}}
 
{{template!==177.start}}
<!--
Büroklammer mit svg im V1 bis V4
-->
 
<!-- begin - versteckter lager-ordner für die svg daten -->
<div id="svg_lager" style="display: none">
<svg xmlns="http://www.w3.org/2000/svg" >
<!--!Font Awesome Free 6.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
<symbol id="icon_bueroklammer" viewBox="0 0 448 512">
<path d="M364.2 83.8c-24.4-24.4-64-24.4-88.4 0l-184 184c-42.1 42.1-42.1 110.3 0 152.4s110.3 42.1 152.4 0l152-152c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-152 152c-64 64-167.6 64-231.6 0s-64-167.6 0-231.6l184-184c46.3-46.3 121.3-46.3 167.6 0s46.3 121.3 0 167.6l-176 176c-28.6 28.6-75 28.6-103.6 0s-28.6-75 0-103.6l144-144c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-144 144c-6.7 6.7-6.7 17.7 0 24.4s17.7 6.7 24.4 0l176-176c24.4-24.4 24.4-64 0-88.4z stroke="#cf142b" />
<symbol>
 
</svg>
<!-- das iccn als vorlage zum einfuegen ins html mit JS / JQ -->
<svg class="svg-icon" ><use href="#icon_bueroklammer" /></svg>
</div>
<!-- end - versteckter lager-ordner für die svg daten -->
 
<div class="icon_box">
<h3>Für V1 bis V4 SVG im HTML</h3>
<div class="text_box">
<div class="inline">Hier soll eine Büroklammer hin </div>
<div class="inline" id="tmp_1"><svg class="svg-icon" ><use href="#icon_bueroklammer" /></svg></div>
</div>
<div class="text_box">
<div class="inline">Hier soll eine Büroklammer hin </div>
<div class="inline" id="tmp_2"><svg class="svg-icon" ><use href="#icon_bueroklammer" /></svg></div>
</div>
</div>
 
<div class="icon_box">
<h3>Für V1 bis V4 SVG einfuegen mit JS / JQ</h3>
<div class="text_box">
<div class="inline">Hier soll eine Büroklammer hin </div>
<div class="inline" id="tmp_3"></div>
</div>
<div class="text_box">
<div class="inline">Hier soll eine Büroklammer hin </div>
<div class="inline" id="tmp_4"></div>
</div>
</div>
 
<script>
/*
* svg mit JQuery einfuegen
* script in footer
*/
$('#svg_lager .svg-icon').clone().appendTo('#tmp_3');
$('#svg_lager .svg-icon').clone().appendTo('#tmp_4');
</script>
{{template!==177.end}}
 

Login
Activity Feed
rating rating
Ingmar hat sich bedankt!
Beitrag: E-Mail abgelehnt wegen fehlender DKIM Signatur
%usernames% hat sich bedankt!
forum_message forum_message
m3ontour hat einen neuen Beitrag im Thema Beiträge schreiben geschrieben.
Hallo,vielen Dank. Mit Ruhe hab ich es jetzt gefunden,Zwischen Tür und Angel sollte man auch nicht wegen so etwas agieren.Danke
rating rating
m3ontour hat sich bedankt!
Beitrag: Beiträge schreiben
%usernames% hat sich bedankt!
forum_message forum_message
Mike48 und Ingmar haben 3 neue Beiträge im Thema E-Mail abgelehnt wegen fehlender DKIM Signatur geschrieben.
Feed Mails. Neuigkeiten aus dem Forum sind wahrscheinlich die Mails, die die User in ihrem Profi einstellen können.
forum_message forum_message
spotter46 und m3ontour haben 2 neue Beiträge im Thema Beiträge schreiben geschrieben.
Zitat von spotter46 im Beitrag #3Bitte sorgfältig lesen und die Einstellungen nach Wunsch verändern - neue Administration verwendenSicherheit in Foren - Forum Update für besseren Schutz vor SpamIm Adminbereich auf Benutzer > Gruppen dann nach und nach jede Gruppe anklicken, etwas runterscrollen und ...
rating rating
catwiesel und Wolfgang haben sich bedankt!
Beitrag: Favicon nur bei Xobor-Homepage?
%usernames% haben sich bedankt!
rating rating
Kipper-Spedition hat sich bedankt!
Beitrag: YouTube "Shorts" einbetten
%usernames% hat sich bedankt!
rating rating
Kipper-Spedition und Wolfgang haben sich bedankt!
Beitrag: YouTube "Shorts" einbetten
%usernames% haben sich bedankt!
rating rating
Wolfgang hat sich bedankt!
Beitrag: Grafischer Fehler unterhalb einer Infobox.
%usernames% hat sich bedankt!
forum_message forum_message
Ingmar und pasdoe haben 9 neue Beiträge im Thema Favicon nur bei Xobor-Homepage? geschrieben.
Ich habe gerade gemerkt, dass in der mobilen Version die Standard-Icons verwendet werden, wenn kein V6 Template aktiv ist. Eventuell ist das ein Problem für die Anzeige bei Google. Ich versuche das morgen zu beheben.
forum_message forum_message
Mike48 und Muenggi haben 3 neue Beiträge im Thema Portal mittlere Box geschrieben.
Bastelbinchen in der Überschrift aber bitte mit ie schreiben.
forum_topic forum_topic
Muenggi hat das Thema Portal mittlere Box erstellt
Ich richte mein Forum neu ein und wollte das Bild in der mittleren Portal-Box auswechseln.Irgend etwas ist falsch gelaufen, der grüne Balken ist weg.Sieht jetzt so aus.
forum_message forum_message
Wolfgang, Ingmar und l2otbart_57 haben 4 neue Beiträge im Thema YouTube "Shorts" einbetten geschrieben.
Hallo Ingmar,wow, super und ein großes Dankeschön! Die Shorts werden so auch in der richtigen Größe angezeigt, ohne Rahmen, gut für die mobile Ansicht, denke ich...**************Der "Embed-Code" taucht nur beim Rechtsklick und "Einbettungscode kopieren" auf!Wenn man sich den Embed-Code herauskopiert...
rating rating
Jaden hat sich bedankt!
Beitrag: Keine Rückmeldungen auf Anfrage per E-Mail
%usernames% hat sich bedankt!
rating rating
Wolfgang hat sich bedankt!
Beitrag: YouTube "Shorts" einbetten
%usernames% hat sich bedankt!
rating rating
Gabriella hat sich bedankt!
Beitrag: YouTube "Shorts" einbetten
%usernames% hat sich bedankt!
forum_message forum_message
Wolfgang hat einen neuen Beitrag im Thema YouTube "Shorts" einbetten geschrieben.
Zitat von Rika1 im Beitrag #1Die Shorts (Kurzvideos) kann man nicht wie die sonstigen Videos einbetten.Vielleicht könnt Ihr das mal ändern, das man sie wie die Videos über die Iconbar einfügen kann in einen Beitrag.Hallo zusammen,vielleicht habe ich da etwas, um das Umbenennen einzusparen.Besser wär...
rating rating
Gabriella und spotter46 haben sich bedankt!
Beitrag: Facebook Videos über Video-Tag einbinden?
%usernames% haben sich bedankt!
rating rating
Gabriella und Portaljäger haben sich bedankt!
Beitrag: V6 - Kein Mail Benachrichtung bei Mitglied sperren
%usernames% haben sich bedankt!
forum_message forum_message
pasdoe, balea und Ingmar haben 4 neue Beiträge im Thema Favicon nur bei Xobor-Homepage? geschrieben.
Zitat von Ingmar im Beitrag #13Zitat von balea im Beitrag #12Bei uns wird auch das Xobor Logo bei Google angezeigt. Wir haben ein .png Foto hochgeladen. Bei .jpeg das gleicheIhr habt das Template-Element "Obere Leiste" verändert und nicht aktualisiert. So kann das nicht klappen...Servus! Ich habe da...
forum_message forum_message
Ingmar und Jaden haben 4 neue Beiträge im Thema Keine Rückmeldungen auf Anfrage per E-Mail geschrieben.
Zitat von Jaden im Beitrag #15Hallo Ingmar,dann weiß ich Bescheid, hatte mich schon gewundert, denn es ist nichts angekommen.Sorry dafür. In diesem Fall ist es besonders gemein, da die Mails irgendwo in einer Endloss-Zustellschleife hängen. Wir haben daher nicht mal eine "konnte nicht zugestellt"-Rü...
forum_message forum_message
Ludger hat einen neuen Beitrag im Thema Facebook Videos über Video-Tag einbinden? geschrieben.
auch "öffentliche" Reels lassen sich mit dem Video-Tag einbettenhttps://www.facebook.com/reel/1615823202413690so verändernhttps://www.facebook.com/watch?v=1615823202413690reel/ durchwatch?v=ersetzen
forum_message forum_message
Ingmar hat einen neuen Beitrag im Thema Grafischer Fehler unterhalb einer Infobox. geschrieben.
Zitat von Mike48 im Beitrag #5In den zweispaltigen V6 Design HPM Gaia, Zeitlos Blau hat der Aktivity Feed einen leeren Footer.Es geht dabei nicht um die Anzahl der Spalten. In diesen Design sind "abgerundete Ecken" vorgesehen. Um die Rundungen auch "unten" in der Box anzuzeigen, braucht es bisher ei...
rating rating
Mike48 hat sich bedankt!
Beitrag: E-Mail abgelehnt wegen fehlender DKIM Signatur
%usernames% hat sich bedankt!
forum_message forum_message
l2otbart_57 hat einen neuen Beitrag im Thema Plugin: showMods - zuständige Moderatoren im Thema anzeigen geschrieben.
Danke Ingmar,Plugin showMods ist online2 Werte lassen sich unabhängig voneinander konfigurieren• Icon hinter dem Namen, z.B. Flagge: 🏁 • Hintergrund des Namen: linear-gradient(to bottom, violet, transparent, transparent, purple) als Farbverlauf.mehr Beispiele https://wiki.selfhtml.org/wiki/CSS/Tut...
rating rating
Ludger hat sich bedankt!
Beitrag: YouTube "Shorts" einbetten
%usernames% hat sich bedankt!
forum_message forum_message
Ingmar hat einen neuen Beitrag im Thema E-Mail abgelehnt wegen fehlender DKIM Signatur geschrieben.
Grundsätzlich ist es so, dass der Fehler auftritt, weil von dieser Adresse zu viele Mails in einer kurzen Zeit versendet werden und web.de das irgendwann blockt. Ein korrekter DKIM-Header kann in solchen Fällen dazu führen, dass die Sperre nicht / später auftritt.Wir werden mit dem nächsten Update d...
rating rating
Wolfgang hat sich bedankt!
Beitrag: YouTube "Shorts" einbetten
%usernames% hat sich bedankt!
forum_message forum_message
Ingmar hat einen neuen Beitrag im Thema V6 - Kein Mail Benachrichtung bei Mitglied sperren geschrieben.
Ich habe die fehlende Funktion soeben im Template hinzugefügt. Das Problem ist somit ~intern behoben~ Änderungen werden immer erst mit dem nächsten Update übernommen. Der Zeitpunkt und Umfang des Updates werden unter Aktuelle News bekanntgegebenPS: Wer nicht warten möchte kann sich die Funktion auc...
forum_message forum_message
Ingmar hat einen neuen Beitrag im Thema manchmal wird die alte Admin-Ansicht angezeigt geschrieben.
Zitat von spotter46 im Beitrag #18nd dort auf Profil bearbeiten geht, wird nach Erledigung der Bearbeitung die alte Admin-Oberfläche angezeigt.Das passiert jedes Mal, wenn so vorgegangen wirdIch kann das wie gesagt leider auch auf diesem Wege nicht reproduzieren. Egal wie ich ein Profil bearbeite än...
rating rating
spotter46 hat sich bedankt!
Beitrag: Mitgliederliste editieren
%usernames% hat sich bedankt!
rsummary rsummary
catwiesel, Wolfgang und Kipper-Spedition haben 4 Beiträge bewertet (Details)
%usernames% hat sich bedankt!
rsummary rsummary
Jaden, Wolfgang und Gabriella haben 3 Beiträge bewertet (Details)
%usernames% hat sich bedankt!
rsummary rsummary
Gabriella, spotter46 und Portaljäger haben 2 Beiträge bewertet (Details)
%usernames% haben sich bedankt!
Wer ist Online?
5 Mitglieder und 26 Gäste sind Online
Besucher Statistiken
31 Aktive User
5 Mitglieder und 26 Gäste sind Online:
Ingmar, nobody, Johannes, zickzack, Lady of the light


Besucherrekord
1274 Benutzer gleichzeitig online (11.10.2019 18:19)

Besucherzähler
Heute waren 984 Gäste und 15 Mitglieder, gestern 2716 Gäste und 26 Mitglieder online.

Statistiken
Themen 42010
Beiträge 307688
Mitglieder 12.583
Forum empfehlen