1

I have simple svg arrow but it doesn't show when I use as pseudo background-image online but it works fine on my localhost: any idea?

span a:after {
  content: "";
  background-image: url(arrow_right.svg);
  width: 24px;
  height: 18px;
  display: inline-block;
  margin: 0px 0 0 10px;
  position: relative;
  top: 3px;
}

svg:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 24 18" enable-background="new 0 0 24 18" xml:space="preserve">
<path fill="#F9C32C" d="M19.8,10.1l-6.6,6.4l1.5,1.5L24,9l-9.3-9l-1.5,1.5l6.6,6.4H0v2.1H19.8z"/>
</svg>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Shin
  • 139
  • 4
  • 12
  • What are the differences in the environments? I often see image links as relative paths to account for differences that people have. – Ian Mundy Oct 14 '16 at 16:07
  • tried both absolute & relative path no luck, when I inspect it, its there but just doesnt show up – Shin Oct 14 '16 at 16:14
  • Is there any error (e.g. 404) in the console for the image? – Fabian Schultz Oct 14 '16 at 16:19
  • 1
    I think you have to use a data-url to access an inline SVG like that. If it's not actually saved as an image it can't be served as an image. - http://stackoverflow.com/questions/10768451/inline-svg-in-css – Paulie_D Oct 14 '16 at 16:23
  • @Paulie_D thanks! that works – Shin Oct 14 '16 at 16:39

1 Answers1

-1

Add content-type=image/svg+xml to your .htaccess file at the root instead of content-type=text/xml

sajith sathyan
  • 32
  • 3