This project has moved and is read-only. For the latest updates, please go here.

Embedding images and fonts in CSS as data-URIs

Dec 4, 2013 at 10:01 PM

is it currently possible to embed images and fonts in CSS as data-URIs?

Thank you!

Dec 5, 2013 at 7:25 AM
Hello, Djanosik!

This feature is not supported.
Dec 5, 2013 at 7:28 AM
Edited Dec 5, 2013 at 7:50 AM
But nothing prevents using of already generated data-URIs.
Dec 5, 2013 at 8:55 AM
Hmm, I will make this feature supported ;)
Dec 5, 2013 at 12:47 PM

Until I not see need for this feature inside the Bundle Transformer.

By the way, BundleTransformer.Less have limited support of the data-uri function (only string parameters supported):
@font-face {
    font-family: "Bitstream Vera Sans Bold";
    src: data-uri("fonts/bitstream-vera-sans-bold/vera-bold-webfont.eot");
    src: url("./fonts/bitstream-vera-sans-bold/vera-bold-webfont.eot?#iefix") format("embedded-opentype"),
        data-uri("fonts/bitstream-vera-sans-bold/vera-bold-webfont.woff") format("woff"),
        data-uri("fonts/bitstream-vera-sans-bold/vera-bold-webfont.ttf") format("truetype"),
        url("fonts/bitstream-vera-sans-bold/vera-bold-webfont.svg#bitstream_vera_sansbold") format("svg");
    font-weight: normal;
    font-style: normal;

    display: inline;
    background-image: data-uri('images/icons/headphone.gif');
Dec 5, 2013 at 10:51 PM
Yes, I see ... it should be sufficient :) Thank you!
Jan 23, 2014 at 2:00 PM
So it works great with:
background-image: data-uri('images/icons/headphone.gif');
But it is PITA to convert all "url()" experssions to "data-uri()". What would I need to make this feature working with the following code as well?
background-image: url('images/icons/headphone.gif');
Thank you!