How to show images inside <a> tags inside <div> tags?-CodePudding

I am trying to create social media icons using svg files in a footer. If I use inline css, it works. If I don't, it does not show. I am using styled-components package.

Any idea how can I get it to work without inline css?

This works:

<div style={{ width: '25px', margin: '0 5px' }}>
  <a href={link}>
    <img src={iconName} alt={(iconName, 'icon')} />
  </a>
</div>

This does NOT work:

const iconSocial = styled.div`
  width: 25px;
  margin: 0 5px;
`;

<iconSocial>
  <a href={link}>
    <img src={iconName} alt={(iconName, 'icon')} />
  </a>
</iconSocial>

This also does NOT work:

<div>
  <a href={link}>
    <img src={iconName} alt={(iconName, 'icon')} />
  </a>
</div>

CodePudding user response：

if you want show image between a tag then:

<a href="">
       <img src="https://static.vecteezy.com/system/resources/thumbnails/001/993/889/small/beautiful-latin-woman-avatar-character-icon-free-vector.jpg" alt="" srcset=""> Profile
   </a>
   <hr>
   <a href=""><i class="fa fa-facebook-square" aria-hidden="true"></i>Facebook</a>
  <a href=""> <i class="fa fa-twitter" aria-hidden="true"></i> Twitter</a>
   <a href=""> <i class="fa fa-linkedin" aria-hidden="true">Linkdin</i> </a>

CodePudding user response：

.svg-img{
  width: 100px;
  height: 100px
}

<div>
  <a href="">
    <img class="svg-img" src="data:image/svg xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xNC44NTEgMTEuOTIzYy0uMTc5LS42NDEtLjUyMS0xLjI0Ni0xLjAyNS0xLjc0OS0xLjU2Mi0xLjU2Mi00LjA5NS0xLjU2My01LjY1NyAwbC00Ljk5OCA0Ljk5OGMtMS41NjIgMS41NjMtMS41NjMgNC4wOTUgMCA1LjY1NyAxLjU2MiAxLjU2MyA0LjA5NiAxLjU2MSA1LjY1NiAwbDMuODQyLTMuODQxLjMzMy4wMDljLjQwNCAwIC44MDItLjA0IDEuMTg5LS4xMTdsLTQuNjU3IDQuNjU2Yy0uOTc1Ljk3Ni0yLjI1NSAxLjQ2NC0zLjUzNSAxLjQ2NC0xLjI4IDAtMi41Ni0uNDg4LTMuNTM1LTEuNDY0LTEuOTUyLTEuOTUxLTEuOTUyLTUuMTIgMC03LjA3MWw0Ljk5OC00Ljk5OGMuOTc1LS45NzYgMi4yNTYtMS40NjQgMy41MzYtMS40NjQgMS4yNzkgMCAyLjU2LjQ4OCAzLjUzNSAxLjQ2NC40OTMuNDkzLjg2MSAxLjA2MyAxLjEwNSAxLjY3MmwtLjc4Ny43ODR6bS01LjcwMy4xNDdjLjE3OC42NDMuNTIxIDEuMjUgMS4wMjYgMS43NTYgMS41NjIgMS41NjMgNC4wOTYgMS41NjEgNS42NTYgMGw0Ljk5OS00Ljk5OGMxLjU2My0xLjU2MiAxLjU2My00LjA5NSAwLTUuNjU3LTEuNTYyLTEuNTYyLTQuMDk1LTEuNTYzLTUuNjU3IDBsLTMuODQxIDMuODQxLS4zMzMtLjAwOWMtLjQwNCAwLS44MDIuMDQtMS4xODkuMTE3bDQuNjU2LTQuNjU2Yy45NzUtLjk3NiAyLjI1Ni0xLjQ2NCAzLjUzNi0xLjQ2NCAxLjI3OSAwIDIuNTYuNDg4IDMuNTM1IDEuNDY0IDEuOTUxIDEuOTUxIDEuOTUxIDUuMTE5IDAgNy4wNzFsLTQuOTk5IDQuOTk4Yy0uOTc1Ljk3Ni0yLjI1NSAxLjQ2NC0zLjUzNSAxLjQ2NC0xLjI4IDAtMi41Ni0uNDg4LTMuNTM1LTEuNDY0LS40OTQtLjQ5NS0uODYzLTEuMDY3LTEuMTA3LTEuNjc4bC43ODgtLjc4NXoiLz48L3N2Zz4=">
  </a>
</div>