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
forum_message forum_message
Mike48, Kaninchenraum und creator haben 11 neue Beiträge im Thema Header nicht sichtbar mobile Ansicht geschrieben.
Beim V1 bis V4 kommt man wie folgt in die mobilen EinstellungenAdministration → Layout → Mobil Da kannst du alle Einstellungen für die mobile Ansicht machen. Auch deine Farben in Mobil so wie im Desktop anpassen. Für den Header:Administration → Layout → Mobil →Desktop-Header Zum Beispiel so:[[File:D...
rating rating
Katzenpfote hat sich bedankt!
Beitrag: Foren-Logo
%usernames% hat sich bedankt!
forum_message forum_message
Mike48 und Katzenpfote haben 6 neue Beiträge im Thema Foren-Logo geschrieben.
Ich habe es mal probiert.Administration → Kopf- & FußzeileIm Logo Wizard nur das Logo eingetragen. Ich habe das Logo geändert und den Hintergrund transparent gemacht. Kannst du dir hier runterladen.[[File:Katzen-Logo-3.png|none|600px|600px]]Administration → Layout → Farben & Einstellungen → Desktop-...
rating rating
Katzenpfote hat sich bedankt!
Beitrag: Foren-Logo
%usernames% hat sich bedankt!
forum_message forum_message
spotter46 und Katzenpfote haben 2 neue Beiträge im Thema Foren-Logo geschrieben.
Zitat von Katzenpfote im Beitrag #11Hallo Zusammenwie kann ich das Forenlogo vergrößern?In dem Du das Bild vergrößerst und das alte Logo damit ersetzt
forum_message forum_message
Katzenpfote und creator haben 4 neue Beiträge im Thema Meine Forenadresse wird unter den Beiträgen falsch angezeigt? geschrieben.
Zitat von creator im Beitrag #4Wenn du bei der Signatur etwas nach unten scrollst, wirst du den Link sicher sehen können.Dankeschön für den Hinweis 👏 genauso ist es.
forum_topic forum_topic
Hallo Zusammen,kann mir Jemand sagen warum die Forenadresse falsch angezeigt wird obwohl der Eintrag im Profil richtig ist?Unter den Beiträgen hier wird angezeigt www.katzenforum.dein meinem Profil steht www.katzenforum-nr1.de [[File:IMG_4343.jpeg|none|fullsize]]
forum_message forum_message
Katzenpfote hat einen neuen Beitrag im Thema Zugriff auf eigenen Domain geschrieben.
Danke @Ingmar für den Hinweis, das hatte ich glatt überlesen. Es hat sich gerade Jemand bei mir gemeldet. Vielen Dank
rating rating
Olaf hat sich bedankt!
Beitrag: Laufschrift über Header
%usernames% hat sich bedankt!
forum_message forum_message
creator hat einen neuen Beitrag im Thema Eigene Seite auf dem Smartphone geschrieben.
Zitat von Andreas Lipske im Beitrag #4Wenn man "responsiv" einsetzt, dann haben u.a."div" u. "center" in dem Seitencode nichts mehr verloren...Wo genau hast du das gehört? Das eine hat mit dem anderen nichts zu tun.Center ist "deprecated" (zur Entfernung vormarkiert), funktioniert aber weiterhin. St...
forum_message forum_message
Rika1 hat einen neuen Beitrag im Thema Laufschrift über Header geschrieben.
Lieber Olaf herzlichen Dank! Das ist jetzt genau was ich wollte und funktioniert einwandfrei!
rating rating
Rika1 hat sich bedankt!
Beitrag: Laufschrift über Header
%usernames% hat sich bedankt!
forum_message forum_message
Olaf und 3 weitere haben 6 neue Beiträge im Thema Laufschrift über Header geschrieben.
@Rika1 Ich habe Dir mein Plugin nochmal zugesendet (Version 0.020).Da kannst Du jetzt einstellen,ob die Laufschrift unter der Navi angezeigt werden soll oder über den Header.Sehr wichtig ist,das bei der Einstellung im Plugin "Anzeigen über den Header" beim V6 das Menü von Xobor nicht fixiert sein da...
forum_message forum_message
Andreas Lipske und 1 weitere haben 3 neue Beiträge im Thema Eigene Seite auf dem Smartphone geschrieben.
Hallo Mike,nun habe ich mich etwas schlau gemacht und beschlossen, nichts zu tun:Wenn man "responsiv" einsetzt, dann haben u.a."div" u. "center" in dem Seitencode nichts mehr verloren...Werde daher sicher nicht an > 100 Seiten rumbasteln Meine Lösung: Ich habe Geduld und warte einfach auf die nächst...
rating rating
Olaf hat sich bedankt!
Beitrag: Laufschrift über Header
%usernames% hat sich bedankt!
rating rating
Olaf und 1 weitere haben sich bedankt!
Beitrag: Laufschrift über Header
%usernames% haben sich bedankt!
rating rating
Andreas Lipske hat sich bedankt!
Beitrag: Eigene Seite auf dem Smartphone
%usernames% hat sich bedankt!
rating rating
Rika1 und 1 weitere haben sich bedankt!
Beitrag: Laufschrift über Header
%usernames% haben sich bedankt!
forum_topic forum_topic
Andreas Lipske hat das Thema Eigene Seite auf dem Smartphone erstellt
Hallo allerseits,wie ihr sicher sehr schnell sehen werdet, besteht mein Forum Andili aus dem Portal ( Startseite) und weit über 100 eigenen Seiten. Alle Seiten habe ich so gebastelt, dass der Inhalt maximal 1100px breit ist und zentriert dargestellt wird. D.h. egal wie breit der Monitor bzw. das Bro...
forum_message forum_message
Mike48 und 3 weitere haben 6 neue Beiträge im Thema Laufschrift über Header geschrieben.
Zitat von Rika1 im Beitrag #1Dieses Plugin vermisse ich sehr! Geht mit v6 leider nicht. Wieder mal ein bereuen auf v6 umgestiegen zu sein. Könnte einer von Euch Bastlern da was machen?Das kannst du ganz einfach selber machen. Jürgen hat die meisten seiner Plugins freigegeben. Du kannst dir selber ei...
rating rating
Rika1 hat sich bedankt!
Beitrag: Laufschrift über Header
%usernames% hat sich bedankt!
rating rating
Rika1 hat sich bedankt!
Beitrag: Laufschrift über Header
%usernames% hat sich bedankt!
forum_message forum_message
Ingmar und 1 weitere haben 2 neue Beiträge im Thema Zugriff auf eigenen Domain geschrieben.
So weit ich mich erinnere habe ich damals geantwortet, dass wir für Auftragsarbeiten frühestens nach den Osterferien wieder Kapazitäten haben.Das wäre dann nächste Woche. Der Kollege wird aber sicherlich am Montag auch noch ein paar andere Dinge auf dem Tisch liegen haben - ich kann daher nicht gara...
rating rating
spotter46 hat sich bedankt!
Beitrag: Laufschrift über Header
%usernames% hat sich bedankt!
forum_topic forum_topic
Rika1 hat das Thema Laufschrift über Header erstellt
Dieses Plugin vermisse ich sehr! Geht mit v6 leider nicht. Wieder mal ein bereuen auf v6 umgestiegen zu sein. Könnte einer von Euch Bastlern da was machen? Ich wäre sehr dankbar!
rating rating
%usernames% hat sich bedankt!
forum_message forum_message
Rika1 und 1 weitere haben 3 neue Beiträge im Thema In neu erstellten Unterforum wird Smilie nicht angezeigt geschrieben.
Danke creator, das war es! Hab es jetzt aktiviert, musste aber erst mit "bearbeiten" den Smilie-Codes einen Ruck geben, danach sind sie erschienen.
forum_topic forum_topic
Hallo,gestern erstellte ich ein neues Unterforum erstellt. Nur in diesem Forum wird ein bestimmtes Smilie nicht angezeigt. In anderen Foren wird es angezeigt wie schon immer. Das Smilie gibt es schon immer. Es ist wie alle Smilies bei mir ein Link zu der homepage-bilder-übersicht.Es funktioniert ja ...
%usernames% hat sich bedankt!
rsummary rsummary
Olaf und 3 weitere haben 4 Beiträge bewertet (Details)
%usernames% haben sich bedankt!
rsummary rsummary
Rika1 hat 2 Beiträge bewertet (Details)
%usernames% hat sich bedankt!
Wer ist Online?
1 Mitglied und 25 Gäste sind Online
Besucher Statistiken
26 Aktive User
1 Mitglied und 25 Gäste sind Online:
Michael.Hassler


Besucherrekord
1274 Benutzer gleichzeitig online (11.10.2019 18:19)

Besucherzähler
Heute waren 835 Gäste und 6 Mitglieder, gestern 3609 Gäste und 22 Mitglieder online.

Statistiken
Themen 41895
Beiträge 306878
Mitglieder 12.579
Forum empfehlen