'How to add icons on the left side of an image?

I have the following code, and I know something is wrong but I can't tell what.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link rel="stylesheet" href="D:\.social-menu.css">
</head>

<body>
  <img src="C:3225888.jpg" alt="Nature" class="responsive">
  <!--Social Media-->
  <div class="conectt">
    <ul class="social-icons">
      <a href="http://www.instagram.com"><img style="width: 38px;" src='C:twitter.png'/></a>
      <a href="http://www.facebook.com"><img style="width: 38px;" src='C:facebook.png'/></a>
      <a href="http://www.youtube.com"><img style="width: 38px;" src='C:youtube.png'/></a>
    </li>
  </div>
</body>

</html>

I wanted to add images to the left side of the image. I know that something is wrong but I haven't been able to figure it out. How do I add these icons on the left side of the image?

htmlcssimage


Solution 1:[1]

  1. You forgot to close-off the ul element by adding </ul> after the </li>;
  2. You should also add the list in the HTML above the image. This will ensure that they appear before (and to the left of) the img element.
  3. You should also add a CSS file to float the div element at the bottom to the left.

Solution 2:[2]

Adopting this CSS & Sprite sheet for brevity and convenience if you place both the image and the icon list (ul) within their own container you can float the icons to the left thus appearing befor ethe image even if they are physically declared after the img element.

/* new css rules */
article{
  margin:2rem;
  padding:1rem;
}
article > ul {
  float:left;
  display:inline-block;
  margin: 0 1rem;
}




/* original css, modified slightly */
.social-media-icons {
    list-style: none;
    margin 0;
    padding: 0;
}
.social-media-icons li {
    display: block;
}
.social-media-icons a {/* edit: added full url */
    background-image: url(//leichim.github.io/retina-social-media-icons/assets/img/social-icons.svg);
    background-repeat: no-repeat;
    display: block;
    height: 58px;
    transition: all 350ms ease-out;
    width: 50px;
}
.social-media-icons a:hover {
    opacity: 0.8;
}
.twitter {
    background-position: 0 0;
}
.facebook {
    background-position: -53px 0;
}
.dribbble {
    background-position: -106px 0;
}
.pinterest {
    background-position: -159px 0;
}
.deviantart {
    background-position: -212px 0;
}
<article>
  <img src='//data.whicdn.com/images/45842479/original.jpg' />
  <ul class="social-media-icons">
      <li><a class="twitter" href="#"></a></li>
      <li><a class="facebook" href="#"></a></li>
      <li><a class="dribbble" href="#"></a></li>
      <li><a class="pinterest" href="#"></a></li>
      <li><a class="deviantart" href="#"></a></li>
  </ul>
</article>


<article>
  <img src='//e7.pngegg.com/pngimages/241/954/png-clipart-unicorn-cup-t-shirt-baby-unicorn-s-horse-purple-thumbnail.png' />
  <ul class="social-media-icons">
      <li><a class="twitter" href="#"></a></li>
      <li><a class="facebook" href="#"></a></li>
      <li><a class="dribbble" href="#"></a></li>
      <li><a class="pinterest" href="#"></a></li>
      <li><a class="deviantart" href="#"></a></li>
  </ul>
</article>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jay
Solution 2 Professor Abronsius

Related Questions