Icon problem ________chevron

Hello guys, I am in the ultimate html/css part 3. In this part I have faced some issue with collapsible part.

When I replace chevron icon format in html it fully filled with primary color.

What is solution for this issue?


I haven’t seen that course in a while so not sure what video it is. Can you share with a CodePen?

I don’t have account in codepen

I was facing the exact same issue when I was doing the course a few months back, what you have to do to fix it is just download the project file from the video (in the course) and at the bottom will be a .zip file attached, all you got to do is extract it and grab the chevron.svg and replace it in your vscode project file or just the folder. Hope this helps!

2 Likes

Thank you bro,it’s work

You’re welcome, friend

1 Like

sprite file doesn’t have the fill property for circle.
So add the fill property like this
circle cx=“25.5” cy=“25.5” r=“25.5” fill=“#393939

7 Likes

The Best Solution!
Thanks Dear Friend

1 Like

It worked, thank you so much.

I also had problems with the background it wouldn’t show up like mosh it was a white background so i made a new class on the span (icon-container) instead of deleting it and added this into the CSS.

.icon-container__broke {
background: #333;
width: 64px;
height: 64px;
border-radius: 100%;
display: inline-flex;
justify-content: center;
align-items: center;
}

fill=“#393939

This was the answer i was looking for!

where to apply this attribute fill=“#393939” I tried in the sprite.svg file in the circle tag but it didn’t work

You can apply it by going to your sprite.svg file on vs code, and write the fill=“#393939” property on the chevron section, like the one in this picture :slight_smile:

1 Like