Chapter 3 lesson 21 Icon color

HTML/CSS
1

Why when I change the image from #wordpress to #snap it looses the color? I have been following and copying the code step by step. Is there something Mosh did not included in the lessons?

Here is the CSS styles I have for the icons:

.icon {

width: 40px;

height: 40px;

}

.icon–primary {

fill: var(–color-primary);

}

.icon-container {

background: #f3f9fa;

width: 64px;

height: 64px;

border-radius: 100%;

display: inline-flex;

justify-content: center;

align-items: center;

}

here is the HTML:

  <div class="media__image">
    <svg class="icon icon--primary">
      <use xlink:href="images/sprite.svg#snap"></use>
    </svg>
  </div>
1 Like
3

Hi,
I’ve ran into the same issue & found what was the problem is.

If you copied the sprite.svg file that mosh have provided then you are good to go.

But, if you have generated the sprite.svg file as mosh told you by yourself, the syntax of your sprite.svg file would be different from moshes ​sprite.svg file.

So just search for id="snap" (you can use CTR+F to look it up in your file) & then there is an inline styles fill="rgb(0,0,0)" that you nedd to get rid of and the problem got solved. :slight_smile:

Snap
Snap1920×1253 212 KB

5 Likes
4

that worked thanks so much!

5

It works! Good eye, @A100D-JS.

6

Thanks. That helped a bunch!