Once we have that, we can simply use the CSS property “fill” to change their color as shown in code below. Fortunately, Barrett Sonntag made a tool to calculate the filters for you Turning black to red ends up a whacky combination like this: invert (27) sepia (51) saturate (2878) hue-rotate (346deg) brightness (104) contrast (97). In order to be able to have the colors modifiable through CSS, we are going to use shapes defined with just path. Trying to finagle the right filters to get the color right is tricky stuff. When you use an inline SVG, instead of font icon, you may have the need of changing the color of these shapes so as to match the text. You can simply select the icon you want to be converted into SVG using the icomoon app, and hit on Generate SVG at bottom. If you are wondering how to generate these SVG to be used inline from a font icon, then let me tell you that it is quite easy to do with icomoon app. While there exits tools like icomoon app, which can create a custom set from these font icons, I decided to go with the inline SVG approach as I find it to be more flexible in long run. Here I am documenting how to achieve this change of color for your SVG via CSS.įont icons such as Font Awesome are great and they provide a huge amount of ready to use and scalable shapes which can be used easily on a webpage, however having so many shapes has a downside on size and therefore the speed of the site. In the very basic sense, you could attempt to mimic a sepia style by overlaying a div on top of an image with a sepia like color and an opacity rgba (94, 38, 18, 0.2) - but this method is rather crude. However, this lead to finding an option to change the color of the inline SVG. There is no accurate way to do this in CSS, as mentioned already you can utilize other technologies to do so - namely Javascript. While working on optimizing some of my websites for speed, I decided to make use of inline SVG images instead of font icons such as Font Awesome.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |