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
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
Gestern 19:12
sikookis hat das Thema Dateisuche in den Dateianhänger nur nach Dateinamen möglich? erstellt
Board-Nr.: 779879In den Dateianhängen kann man eine Suche starten. Diese scheint aber nur für Dateinamen zu funktionieren.Jeder Dateianhang hat jedoch auch einen Titel:[[File:Dateianhang.png|none|fullsize]]Die Dateinamen sind allesamt bei mir kryptisch. Nach dem Titel zu suchen wäre wesentlich besse...
Gestern 09:05
Meikel hat das Thema Gibt es ein Red-Flag-Plugin bzw. Scan-Plugin für automatische Verwarnungen? erstellt
Hallo Team!ich bin auf der Suche nach einem Plugin in für automatische Verwarnungen. Die Idee dahinter ist, wenn ein Forenmitglied Wörter benutzt, die laut den Forenregeln nicht gestattet sind, dann sollen diese automatisch zu einer Verwarnung führen beziehungsweise gelöscht werden. Eine andere Idee...
@Ingmar Es kam eben in unserem Forum die Frage auf, weshalb plötzlich der Zugriff auf das Forum als nicht sicher angezeigt wird. Das ist seit irgendwann heute tatsächlich der Fall, egal mit welchem Browser.Ist ein Sicherheitszertifikat abgelaufen oder ist das durch ein Update von euch passiert? Auf...
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
%usernames% hat sich bedankt!
Besucher Statistiken
Statistiken
Themen | 41408 |
Beiträge | 302325 |
Mitglieder | 12.393 |
Forum empfehlen