How To add Social Media icons on the left side of an image?-CodePudding

<!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" >
    <!--Social Media-->
    <div >
            <ul >
<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>

This code needs help.I wanted to add images to the leftside of the image The code looks bad i agree but help,i've been trying for so long. Couldn't add image ...

CodePudding user response：

You forgot to close-off the ul element by adding </ul> after the </li>;
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.
You should also add a CSS file to float the div element at the bottom to the left.

CodePudding user response：

The best way is to use fontawesom. 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

* {
    box-sizing: border-box;
}

ul {
    list-style-type: none;
}

.column {
    float: left;
    width: 15%;
    padding: 10px;
    height: 300px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

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

<head>
    <meta charset="utf-8">
    <title>Test</title>
</head>

<body>
    <div >
        <div >
            <ul>
                <li>
                    <a href="https://www.twitter.com">
                        <img width=30 src="https://image-placeholder.com/images/social/twitter.png">
                    </a>
                </li>

                <li>
                    <a href="https://www.facebook.com">
                        <img width=30 src="https://image-placeholder.com/images/social/facebook.png">
                    </a>
                </li>
                <li>
                    <a href="https://www.linkedin.com">
                        <img width=30 src="https://image-placeholder.com/images/social/linkedin.png">
                    </a>
                </li>
            </ul>
        </div>

        <div >
            <img src="https://plchldr.co/i/720x130?&bg=000000&fc=FFFFFF&text=Example" alt="Nature" >
        </div>
    </div>
    </div>
</body>

</html>