1

I have SVG icons in the CSS of my webpage. They show and are responsive in Chrome and Safari, but do not show at all in Firefox. Is the problem in the way that I link to the SVGs with content:url and is there a workaround?

CSS:

    #about-linked{
      content:url('./info.svg');
      position: absolute;
      background-color: rgba(24, 24, 24, 0.0);
      z-index: 10;
      border-radius: 5px;
      bottom: 1%;
      left: 1%;
      height: 35px;
      width: 35px;
      opacity: 0.7;
      display: none
    }

    #about-linked:hover{
      cursor: pointer;
      opacity: 0.9;
  }

#changeLayer{
  content:url(https://cdn1.iconfinder.com/data/icons/pixel-perfect-at-16px-volume-1/16/5049-512.png);
    position: absolute;
  background-color: rgba(24, 24, 24, 0.0);
  z-index: 3;
  border-radius: 5px;
    top: 10%;
  left: 26%;
    height: 35px;
  width: 35px;
    opacity: 0.7;
}

HTML:

  <div id='map'>
    <div id='program_title'>
        <span id="myspan">TITLE</span>
    </div>

    <div id ='about-linked'></div>
  </div>

<div id='changeLayer'></div>

NOTE: changing to content to background-image produces and undesirable pattern as opposed to an icon: For example (in Chrome) with content:, I get:

enter image description here

but with background-image: I get:

enter image description here

Improve this question

1 Answer 1

Reset to default
1

content only works with ::before and ::after pseudo elements. Other browsers may support it but that's against official documentation.

The good news is that the only change you need to make is:

#changeLayer::before{
    ...
Improve this answer
4
  • with the #changeLayer icon, when I use ::before, the image becomes huge and takes up half of the screen...
    – iskandarblue
    Commented Feb 15, 2017 at 15:23
  • Is there a reason you're loading these via content as opposed to background image in the first place?
    – Serg Chernata
    Commented Feb 15, 2017 at 15:28
  • Check the updated question - it's because I get a background fill pattern instead of an icon.
    – iskandarblue
    Commented Feb 15, 2017 at 15:53
  • Look into background image properties, they are far more flexible than content. You can set background-repeat: none; as well as background-size: cover; etc
    – Serg Chernata
    Commented Feb 15, 2017 at 15:57

Not the answer you're looking for? Browse other questions tagged or ask your own question.