Article Preview Component with HTML, CSS, JS

Community feedback

• Account deleted

  Hi.

  The reason why you can't change the color of the icon is because you're using background-image and that is not part of the DOM, so you can't manipulate it directly. Fortunately, there are a few workarounds to solve this:

  1. Use mask

  Mask is a clipped image into specific points.

  .my-class {
       mask-image: url(my-image.svg);
       background-color: red;
  }
  

  As you can see, we clip the image and set a background color for that image.

  I wouldn't recommend this because it doesn't have good browser support (for instance, it doesn't work on IE and edge).

  2. Duplicate SVG (better solution)

  Create a new SVG image from the original one and change its fill value to #FFF

  When you hover the element, just replace the images

  .my-class {
      background-image: url(gray-icon.svg)
  }
  
  .my-class:hover {
      background-image: url(white-icon.svg)
  }
  

  3. Use font icons (best solution)

  Instead of using SVG, use font icons like IconMonstr or FontAwesome and treat the icons as fonts

  HTML
  
  <i class="my-class im im-fire"></i>
  
  CSS
  
  @import url("https://cdn.iconmonstr.com/1.3.0/css/iconmonstr-iconic-font.min.css");
  
  .my-class {
      color: #333;
  }
  
  .my-class:hover {
      color: #fff;
  }
  

  I hope it helps.

  1
• 

  Zakarya Noori•0

  @ZakaryaNooriPosted over 4 years ago

  pay attention to small details(shadows, alignment, font sizing and coloring) btw well done.

  0