CODEWITHSUNDEEP
htmlcssimage
Virtualization
Virtualization

Reputation: 1

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?

Upvotes: 0

Views: 910

Answers (3)

Horly Andelo
Horly Andelo

Reputation: 69

The best way is to use fontawesome. You have 2 possibilities :

First possibility : load fontawesome ressources from cdn link :

<!-- Use CDN-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" crossorigin="anonymous" />

Second possibility : download fontawesome files with this link and create folder in your project named font and put fontawesome files in :

<!--Internal file-->
    <link rel="stylesheet" href="fonts/fontawesome-free-5.15.4-web/css/all.css">

This is all code using fontawesome with cdn :

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <title>Test</title>
      <link rel="stylesheet" href="D:\.social-menu.css">
    
        <!-- Use CDN-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" crossorigin="anonymous" />
    
        <!--Internal file-->
        <!--<link rel="stylesheet" href="fonts/fontawesome-free-5.15.4-web/css/all.css">-->
      
    </head>
    
    <body>
        <style>
            #root{
                display: flex;
                flex-direction: row;
                align-items: center;
            }
    
            #root .conectt{
                margin: 25px;
            }
    
            .social-icons{
                list-style: none;
                padding-left: 0;
            }
    
            .social-icons li{
                padding: 10px;
            }
            .social-icons a{
                text-decoration: none;
                color: black;
            }
        </style>
    
        <div id="root">
            <div class="conectt">
                <ul class="social-icons">
                    <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                    <li><a href="#"><i class="fab fa-facebook-square"></i></i></a></li>
                    <li><a href="#"><i class="fab fa-youtube"></i></a></li>
                </ul>
            </div>
            <img src="C:3225888.jpg" class="nature" alt="Nature" class="responsive">
            <!--Social Media-->
        </div>
        
    </body>
    
    </html>

Image : enter image description here

Upvotes: 1

Professor Abronsius
Professor Abronsius

Reputation: 33823

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>

Upvotes: 0

Jay
Jay

Reputation: 106

  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.

Upvotes: 0

Related Questions