question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't color the svgs with css

See original GitHub issue

Hey,

I can’t color my svgs with CSS like this:

.icon.google:before {
      background-position: 0em -3.3125em;
      width: 0.9375em;
      height: 0.9375em;
      fill: red;
  }

either this:

<span class="icon google" style="fill: red;"></span>

What am I doing wrong? Is there a possibility to style the svgs via CSS?

cheers bambamboole

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:6
  • Comments:5

github_iconTop GitHub Comments

1reaction
Khaleelcommented, Mar 21, 2017

You cannot fill SVG likes that in CSS. You need to use another approach.

https://una.im/svg-icons/#💁

0reactions
soenkekluthcommented, Mar 29, 2017

@Khaleel is right

Read more comments on GitHub >

github_iconTop Results From Across the Web

I can't change the fill color of a SVG Sprite
My problem is that I'm not able to change the fill color of the elements added to the spritesheet. I have looked for...
Read more >
Change Color of SVG on Hover
The way that I like to do it: 1. SVG: Make the SVG black #000000 where you want to control the color on...
Read more >
Applying fill color to SVG doesn't work - Oxygen XML Forum
It works in HTML. I generate an HTML file with one CSS file, then clone the HTML and apply my print CSS. The...
Read more >
How to change color of SVG (Various ways using CSS)
In this article, I have explained how we can change the color of SVG using CSS in various possible ways.
Read more >
Changing SVG icon color and size via CSS? · Issue #235
I tried to remove color and width/height information from the svg-files and then tried to apply different CSS styles, e.g.:.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found