SVG-Grafik im CSS before einbinden
Hi Leute,
wie bindet man eine SVG-Grafik / Facebook-Symbol in einer CSS-Datei als Pseudoelement before ein?
Die SVG-Datei liegt unter:
files/layout/svg-grafiken/facebook.svg
Der SVG-Code:
Code:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="2083.000000pt" height="2075.000000pt" viewBox="0 0 2083.000000 2075.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,2075.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M9967 20739 c-249 -10 -620 -42 -875 -74 -2697 -345 -5132 -1720
-6837 -3860 -1254 -1574 -2023 -3491 -2209 -5510 -42 -448 -54 -1170 -28
-1570 84 -1260 341 -2352 819 -3480 186 -439 504 -1043 768 -1460 782 -1235
1792 -2275 3001 -3088 975 -656 2048 -1142 3167 -1432 l127 -33 0 3459 0 3459
-1075 0 -1075 0 0 1595 0 1595 1074 0 1074 0 5 978 c3 589 9 1027 16 1102 49
561 102 902 197 1283 489 1946 1808 2971 4070 3161 276 24 717 38 934 31 688
-22 1546 -120 2023 -232 l107 -25 0 -1445 0 -1444 -52 5 c-127 15 -424 26
-828 32 -592 9 -877 -9 -1212 -76 -815 -164 -1255 -614 -1412 -1442 -56 -295
-59 -344 -63 -1165 l-5 -763 1702 0 1702 0 -6 -27 c-3 -16 -134 -728 -291
-1583 -157 -855 -287 -1561 -290 -1567 -3 -10 -295 -13 -1410 -13 l-1405 0 0
-3574 0 -3575 33 5 c246 34 421 61 557 85 2897 522 5441 2254 7002 4769 252
405 542 963 721 1385 431 1017 695 2062 791 3135 42 463 54 1171 28 1570 -99
1467 -443 2759 -1073 4025 -858 1727 -2195 3193 -3844 4216 -1769 1098 -3820
1634 -5928 1548z"/>
</g>
</svg>
Die CSS-Anweisung lautet:
Code:
.facebook {
&::before {
content: '';
background: url(/files/layout/svg-grafiken/facebook.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
display: inline-flex;
height: 15px;
width: 15px;
} /*before*/
a {
color:inherit;
text-decoration:none;
} /*a*/
} /*.facebook */
Aber das wird im Frontend nicht angezeigt.
## Problem GELÖST ##
## Es lag am fehlenden "/" vor files, also so hier ist es korrekt: background: url(/files/layout/svg-grafiken/facebook.svg);
## habe es oben korrigiert
