CODEWITHSUNDEEP
htmlcssreactjsstyled-components
mongonoob
mongonoob

Reputation: 113

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

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>

Upvotes: 0

Views: 41

Answers (2)

Aman Sharma
Aman Sharma

Reputation: 964

.svg-img{
  width: 100px;
  height: 100px
}
<div>
  <a href="">
    <img class="svg-img" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xNC44NTEgMTEuOTIzYy0uMTc5LS42NDEtLjUyMS0xLjI0Ni0xLjAyNS0xLjc0OS0xLjU2Mi0xLjU2Mi00LjA5NS0xLjU2My01LjY1NyAwbC00Ljk5OCA0Ljk5OGMtMS41NjIgMS41NjMtMS41NjMgNC4wOTUgMCA1LjY1NyAxLjU2MiAxLjU2MyA0LjA5NiAxLjU2MSA1LjY1NiAwbDMuODQyLTMuODQxLjMzMy4wMDljLjQwNCAwIC44MDItLjA0IDEuMTg5LS4xMTdsLTQuNjU3IDQuNjU2Yy0uOTc1Ljk3Ni0yLjI1NSAxLjQ2NC0zLjUzNSAxLjQ2NC0xLjI4IDAtMi41Ni0uNDg4LTMuNTM1LTEuNDY0LTEuOTUyLTEuOTUxLTEuOTUyLTUuMTIgMC03LjA3MWw0Ljk5OC00Ljk5OGMuOTc1LS45NzYgMi4yNTYtMS40NjQgMy41MzYtMS40NjQgMS4yNzkgMCAyLjU2LjQ4OCAzLjUzNSAxLjQ2NC40OTMuNDkzLjg2MSAxLjA2MyAxLjEwNSAxLjY3MmwtLjc4Ny43ODR6bS01LjcwMy4xNDdjLjE3OC42NDMuNTIxIDEuMjUgMS4wMjYgMS43NTYgMS41NjIgMS41NjMgNC4wOTYgMS41NjEgNS42NTYgMGw0Ljk5OS00Ljk5OGMxLjU2My0xLjU2MiAxLjU2My00LjA5NSAwLTUuNjU3LTEuNTYyLTEuNTYyLTQuMDk1LTEuNTYzLTUuNjU3IDBsLTMuODQxIDMuODQxLS4zMzMtLjAwOWMtLjQwNCAwLS44MDIuMDQtMS4xODkuMTE3bDQuNjU2LTQuNjU2Yy45NzUtLjk3NiAyLjI1Ni0xLjQ2NCAzLjUzNi0xLjQ2NCAxLjI3OSAwIDIuNTYuNDg4IDMuNTM1IDEuNDY0IDEuOTUxIDEuOTUxIDEuOTUxIDUuMTE5IDAgNy4wNzFsLTQuOTk5IDQuOTk4Yy0uOTc1Ljk3Ni0yLjI1NSAxLjQ2NC0zLjUzNSAxLjQ2NC0xLjI4IDAtMi41Ni0uNDg4LTMuNTM1LTEuNDY0LS40OTQtLjQ5NS0uODYzLTEuMDY3LTEuMTA3LTEuNjc4bC43ODgtLjc4NXoiLz48L3N2Zz4=">
  </a>
</div>

Upvotes: 1

Zulfiqar Khan
Zulfiqar Khan

Reputation: 21

if you want show image between a tag then we have two option first one our custom image (also you need to write some css to its styling) and second is using fa icon you can use any method according to your requirement.

<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>

Upvotes: 1

Related Questions