Using Fontello SVG as a background-image - css

Question

I am using font icons (web fonts) generated from Fontello. Downloaded pack includes SVG file.
Example. I generated fontello pack consisting of only 1 icon (mail-1)
It looks as below:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Copyright (C) 2015 by original authors # fontello.com</metadata>
<defs>
<font id="fontello" horiz-adv-x="1000">
<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
<missing-glyph horiz-adv-x="1000" />
<glyph glyph-name="mail-1" unicode="" d="m929 11v428q-18-20-39-37-149-114-238-188-28-24-46-38t-48-27-57-13h-2q-26 0-57 13t-48 27-46 38q-88 74-238 188-21 17-39 37v-428q0-8 6-13t12-5h822q7 0 12 5t6 13z m0 586v14t-1 7-1 7-3 5-5 4-8 2h-822q-7 0-12-6t-6-12q0-94 82-159 108-85 224-177 4-2 20-16t25-21 25-18 28-15 24-5h2q11 0 24 5t28 15 25 18 25 21 20 16q116 92 224 177 30 24 56 65t26 73z m71 21v-607q0-37-26-63t-63-27h-822q-36 0-63 27t-26 63v607q0 37 26 63t63 26h822q37 0 63-26t26-63z" horiz-adv-x="1000" />
</font>
</defs>
</svg>
I need to use this icon in CSS as background-image, thanks to similar code:
.icon {
background: url('data:image/svg+xml; ... ');
}
...I read about it on https://css-tricks.com/using-svg/...
But I do not know how can I generate this data:image/svg+xml code from my SVG (Fontello) code. Of course I pasted this SVG code as it is in background: url('data:image/svg+xml;... but it does not work...
help!

Answer 1

I create a svg file with a path from the glyph with the following steps.
First, go to the config.json and locate the character.
It should be something like:
{
"uid": "91d1768d00bc3e6ee51c2fcea9810679",
"css": "my-address",
"code": 57514,
"src": "custom_icons",
"selected": true,
"svg": {
"path": "M994.5 17.7C988.8 11.8 980 10.1 972.5 13.6L11.3 454.7C3.6 458.3-0.9 466.5 0.2 474.9S7.8 490 16.2 491.4L447.3 563.7 496.6 971.1C497.7 979.6 504.1 986.4 512.6 987.9 513.7 988.1 514.8 988.2 515.8 988.2 523.1 988.2 529.9 984.1 533.2 977.4L998 39.8C1001.6 32.4 1000.2 23.6 994.5 17.7Z",
"width": 1000
},
"search": [
"myaddress-icon"
]
}
Copy its path value and insert it into the path of a svg like this one (set the width and height value of the svg as the width value in the config):
<svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg">
<path d="M994.5 17.7C988.8 11.8 980 10.1 972.5 13.6L11.3 454.7C3.6 458.3-0.9 466.5 0.2 474.9S7.8 490 16.2 491.4L447.3 563.7 496.6 971.1C497.7 979.6 504.1 986.4 512.6 987.9 513.7 988.1 514.8 988.2 515.8 988.2 523.1 988.2 529.9 984.1 533.2 977.4L998 39.8C1001.6 32.4 1000.2 23.6 994.5 17.7Z"/>
</svg>
and save it as a .svg file.
Lastly, you can open it with an image editor (I use inkscape) and adjust the vectorial image to the viewbox.
And you can use it as a background.

Answer 2

Just convert the image <glyph> to a <path>.
Remove all glyph attributes like unicode.
add transform and scale to actually showing the element at a decent size
You can play around with the size of the icon width transform='scale()' on the path element.
I chose to use 200px as its size (approximately)
Then you can just use it inside the url();
.svgback {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><path transform='scale(0.2) translate(0 200)' d='m929 11v428q-18-20-39-37-149-114-238-188-28-24-46-38t-48-27-57-13h-2q-26 0-57 13t-48 27-46 38q-88 74-238 188-21 17-39 37v-428q0-8 6-13t12-5h822q7 0 12 5t6 13z m0 586v14t-1 7-1 7-3 5-5 4-8 2h-822q-7 0-12-6t-6-12q0-94 82-159 108-85 224-177 4-2 20-16t25-21 25-18 28-15 24-5h2q11 0 24 5t28 15 25 18 25 21 20 16q116 92 224 177 30 24 56 65t26 73z m71 21v-607q0-37-26-63t-63-27h-822q-36 0-63 27t-26 63v607q0 37 26 63t63 26h822q37 0 63-26t26-63z'/></svg>");
width: 200px;
height: 200px;
}
<div class="svgback"></div>
<!-- Image data -->
<!--svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<metadata>Copyright (C) 2015 by original authors # fontello.com</metadata>
<path transform='scale(0.2) translate(0 200)' d="m929 11v428q-18-20-39-37-149-114-238-188-28-24-46-38t-48-27-57-13h-2q-26 0-57 13t-48 27-46 38q-88 74-238 188-21 17-39 37v-428q0-8 6-13t12-5h822q7 0 12 5t6 13z m0 586v14t-1 7-1 7-3 5-5 4-8 2h-822q-7 0-12-6t-6-12q0-94 82-159 108-85 224-177 4-2 20-16t25-21 25-18 28-15 24-5h2q11 0 24 5t28 15 25 18 25 21 20 16q116 92 224 177 30 24 56 65t26 73z m71 21v-607q0-37-26-63t-63-27h-822q-36 0-63 27t-26 63v607q0 37 26 63t63 26h822q37 0 63-26t26-63z"
/>
</svg-->