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
Katja23101971 und 4 weitere haben sich bedankt!
Beitrag: Ich mag kein Ideenklau respektive Urheberrecht !
%usernames% haben sich bedankt!
forum_message forum_message
Olaf und 1 weitere haben 2 neue Beiträge im Thema Im Plugin "eigene Seite" können Variablen nicht bearbeitet werden geschrieben.
Zitat von Ingmar im Beitrag #12Ich glaube du hast da etwas missverstanden:Ich glaube,das ich da nichts missverstanden habe.Wenn mir ein Plugin-Editor zur Verfügung gestellt wird,dann sollte das erstellte Plugin auch seine eigenen Funktionen (API) kennen.In meinem Fall ist das Plugin mit seinen erste...
forum_message forum_message
Ingmar hat einen neuen Beitrag im Thema Ich mag kein Ideenklau respektive Urheberrecht ! geschrieben.
Hey @cleo Auch wenn ich gut nachvollziehen kann, dass du das Bedürfnis hast die Sache zu "klären" würde ich euch bitten, das in privaten Mails zu erledigen. Es handelt sich hier offensichtlich um privaten Ärger, der nichts mit unserer Forensoftware zu tun hat. Ich bitte um Verständnis, dass das Supp...
forum_message forum_message
l2otbart_57 und 1 weitere haben 3 neue Beiträge im Thema Forum für Persisch - per CSS formatieren geschrieben.
Auf der Hauptseite greift doch dein CSS für die Kategorien[[File:rtl_1.png|none|fullsize]]aber diese Sektoren greifen nicht: 123 .postbody,#forumid-28390 .threadtitle,#forumid-28390 .topic {..} nehme an, sie sollten in der Forumansicht und Threadansicht wirkenich würde es definieren: 123456789 body....
forum_topic forum_topic
Hallöchen wie fasse ich das jetzt zusammen um niemand auf die Füße zu treten und noch mit Respekt zu begegnen ? Frau..Du warst bei mir Co Admin. Unsere Wege haben sich getrennt. Habe Dir nahegelegt mach ein eigenes Forum mit Premium bei Xobor Miranus. Das hast Du jetzt getan. Du hast mein Wortlaut ...
rating rating
BeaBielecki hat sich bedankt!
Beitrag: Großes Lob an das Xobor-Team
%usernames% hat sich bedankt!
forum_topic forum_topic
Bussinchen hat das Thema Forum für Persisch - per CSS formatieren erstellt
Hallo allerseits!Ich habe mir ein neues Forum mit dem Business Template (v4) zugelegt, in dem sowohl auf Englisch als auch auf Persisch geschrieben werden soll. Ich habe eine Kategorie angelegt, wo in den dort angelegten Foren und den verschiedenen Threads nur auf Persisch geschrieben wird bzw. werd...
forum_message forum_message
l2otbart_57 und 3 weitere haben 10 neue Beiträge im Thema Im Plugin "eigene Seite" können Variablen nicht bearbeitet werden geschrieben.
Zitat von Mike48 im Beitrag #9Zitat von l2otbart_57 im Beitrag #6um die Bibliotheken mache ich mi gar keine Gedanken.Musst du aber wenn du die Seite ohne Kopf- Fußzeile einrichtest. Vielleicht reicht die Fußzeile.Ich habe meine leere Seite z. B. als game.js gespeichert. Die enthält dann meine Funkti...
rating rating
Ludger und 3 weitere hat sich bedankt!
Beitrag: Wann wird sich mal mit den Plugins in der neuen Admin beschäftigt
%usernames% hat sich bedankt!
forum_message forum_message
Diese Fehlermeldung ist schon 3 Monate her.Ist jetzt auch nicht sooooo wichtig,aber es ist ein Fehler.Die Bilder fliegen immer noch von einer Seite zur anderen,ohne das ich sie mir ansehen kann.Gut zu sehen in meinem Plugin "Kalenderfarben ändern".GrußOlaf
forum_topic forum_topic
Die Konfigurations Einstellungen in der neuen Admin sehen furschtbar aus. Die einzelnen Einstellungen in einem Plugin sind nicht durch eine Linie getrennt. Sehr unübersichtlich.In Plugin Home sind so viele Plugins gelistet dass man Mühe hat, an die Liste der installierten zu kommen. Die Seite Plugin...
forum_message forum_message
Ingmar hat einen neuen Beitrag im Thema Spendenbox wird auch bei Ziel 0 angezeigt geschrieben.
Ich glaube die einstellung greift nur, wenn das Ziel mehr als 0 euro sind.Du kannst nebenan einstellungen, welche gruppen die box sehen sollen (oder auch nicht sehen sollen)
forum_topic forum_topic
quiclic hat das Thema Spendenbox wird auch bei Ziel 0 angezeigt erstellt
Hi,bei uns (untis-anwender.at) wird die Spendenbox derzeit angezeigt, obwohl unser Spendenziel 0 € ist und das Konto auch auf 0 € ist. Die Einstellungen sind:[[File:Forenkonto Null.png|none|auto]]Eigentlich möchte ich die Box erst wieder im Herbst anzeigen (unsere Rechnung kommt im Januar). Was tun?...
forum_message forum_message
Rika1 und 1 weitere haben 9 neue Beiträge im Thema Favicon wird nicht angezeigt geschrieben.
Favicon nur in der Browser-Favoriten-Leiste oben. Ganz oben in der Browseranzeige nicht.
forum_topic forum_topic
Ich weiß nicht genau ob es ein Bug ist oder ob es mit Absicht so gewollt ist.Wenn ich im Plugin eine "eigene Seite" anlege und dort eine Globale Variable oder eine Konfigurationsvariable erstelle,dann kann ich sie weder beschreiben noch lesen.Aber andersherum frage ich mich dann,wieso man die Variab...
rsummary rsummary
l2otbart_57 und 2 weitere haben 6 Beiträge bewertet (Details)
%usernames% hat sich bedankt!
rating rating
l2otbart_57 hat sich bedankt!
Beitrag: V6-Galerie: Apostroph im Bildtitel
%usernames% hat sich bedankt!
rating rating
l2otbart_57 hat sich bedankt!
Beitrag: Springt nicht zum letzten Beitrag der Seite
%usernames% hat sich bedankt!
rating rating
l2otbart_57 hat sich bedankt!
Beitrag: V6: "Das Pflichtfeld (....) muss ausgefüllt werden"
%usernames% hat sich bedankt!
rating rating
Rika1 hat sich bedankt!
Beitrag: Favicon wird nicht angezeigt
%usernames% hat sich bedankt!
rating rating
Rika1 hat sich bedankt!
Beitrag: Favicon wird nicht angezeigt
%usernames% hat sich bedankt!
rating rating
%usernames% hat sich bedankt!
forum_topic forum_topic
Rika1 hat das Thema Favicon wird nicht angezeigt erstellt
Seit heute früh wird das Favicon auf meiner Forum-Seite nicht mehr angezeigt.Woran kann das liegen?
rating rating
%usernames% hat sich bedankt!
forum_message forum_message
Ingmar und 2 weitere haben 4 neue Beiträge im Thema FAQ, Statistik, etc. in Fußzeile ausblenden. (Gaia Template v3) geschrieben.
Zitat von spotter46 im Beitrag #11Da zitieren aktuell nur sporadisch funktioniertDanke für die Erinnerung. Das sollte jetzt wieder besser klappen.Ich hatte das heutige Update hier im Forum noch nicht eingespielt.
forum_message forum_message
Marlies Stockmann und 2 weitere haben 4 neue Beiträge im Thema Zeitumstellung geschrieben.
Erst mal Dankecwerd heute um 0 Uhr sehen ob ok
rating rating
Keeper01 und 1 weitere haben sich bedankt!
Beitrag: FAQ, Statistik, etc. in Fußzeile ausblenden. (Gaia Template v3)
%usernames% haben sich bedankt!
forum_message forum_message
Ingmar hat einen neuen Beitrag im Thema YouTube Videos werden plötzlich nicht mehr angezeigt geschrieben.
@CuSF der Fehler sollte mittlerweile behoben sein.
rating rating
Nara und 1 weitere haben sich bedankt!
Beitrag: Großes Lob an das Xobor-Team
%usernames% haben sich bedankt!
forum_message forum_message
Keeper01 und 2 weitere haben 5 neue Beiträge im Thema FAQ, Statistik, etc. in Fußzeile ausblenden. (Gaia Template v3) geschrieben.
Danke dir für die Mühe, super lieb von dir. Ich schaue nachher mal, wenn ich wieder daheim bin. lg Keppi
rating rating
%usernames% hat sich bedankt!
Wer ist Online?
5 Mitglieder und 66 Gäste sind Online
Besucher Statistiken
71 Aktive User
5 Mitglieder und 66 Gäste sind Online:
Katzenpfote, DoKo, Johannes, nobody, Kipper-Spedition


Besucherrekord
1274 Benutzer gleichzeitig online (11.10.2019 18:19)

Besucherzähler
Heute waren 2169 Gäste und 28 Mitglieder, gestern 4662 Gäste und 36 Mitglieder online.

Statistiken
Themen 41866
Beiträge 306648
Mitglieder 12.546
Forum empfehlen