SVG-Grafik im CSS before einbinden

[Schnippel]

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:

<?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:

.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