Huddle landing page with single introductory section

Community feedback

• 

  seranela•1,150

  @seranelaPosted almost 2 years ago

  Since you already have the SVG icon code inside of your HTML, you can apply styles to them. CSS Tricks has a resource on how you can accomplish that. The example SVG icons I've used have a fill attribute on the <path> element. So, I would have <path class="icon-path" fill="#FFFFFF">. Then, you could do .icon-path:hover { fill: red; }. The resource link has it in the <svg> element, which apparently works as well.

  As for accessibility, I use Firefox's Accessibility tab and Chrome's Lighthouse tab in their dev tools to do some initial checks on issues. After that, I upload an initial solution version and then check it with WebAIM. These aren't a perfect solution to solving accessibility, but it does relieve some of it. There's an Accessibility Developers Guide with further information.

  0
• 

  Sinisa Vukmirovic•1,690

  @SinisaVukmirovicPosted almost 2 years ago

  Hello!

  About your dilema with SVG icons... If you open SVG image in VS code, you will see SVG image code. Every SVG image has one or more <path> elements inside of it. Ipath element should have "fill" attribute, if it doesn't you can add it.

    <path fill="red" ...>
  

  Fill with SVG paths is like color or backgrounds properties are in CSS.

  You can also set the fill atribute and change its color through CSS styles

    svg path {
      fill: purple;
    }
  

  Try it, hope this helps!

  0