[Solved] How To Add Different Images In Li

Introduction

Adding images to a list (li) can be a great way to make your website more visually appealing and engaging. It can also help to break up long lists of text and make them easier to read. In this tutorial, we will discuss how to add different images to a list (li) using HTML and CSS. We will also discuss how to style the images to make them look more attractive and professional. Finally, we will discuss some tips and tricks for making sure your images look great on all devices.

Solution

body{background:green}
.social-sites{
    margin-left: 50px;
    margin-top: 20px;
    position: relative;
}

.social-sites ul{
    list-style-type: none;
}

.social-sites ul li{
    display: inline-block;
    text-align: center;
    vertical-align:middle 
}

.social-sites ul li a{
    text-decoration: none;
    padding: 12px;
    margin: 8px;
    font-size: 20px;
    color: #fff;
    vertical-align:middle;
   display: inline-block;
} 
.social-sites ul li a img{
  width:40px;
  margin-right:5px;
}

<div class="social-sites">
  <ul>
    <li class="fb">
      <a href="https://stackoverflow.com/questions/40085413/facebook.com" target="_blank">
        <img src ="http://www.closetoyou.co/v/vspfiles/assets/images/fbook.png"/>Facebook</a>
    </li>
    <li class="twit">
      <a href="twitter.com" target="_blank">
        <img src ="http://i.imgur.com/9Z46uKc.png"/>Twitter</a>
    </li>
    <li class="ld">
      <a href="linkedin.com" target="_blank">
        <img src ="http://www.vds-horeca.nl/media/12768/linkedin_icon_small.png"/>LinkedIn</a></li>
  </ul>
</div>

Solved: How To Add Different Images In Li Code With Pre HTML Tags

Adding images to a list item (li) code can be a great way to make your website more visually appealing. However, if you are using pre HTML tags, it can be a bit tricky. In this article, we will discuss how to add different images in li code with pre HTML tags.

First, you will need to create a list item (li) code. This code should include the opening and closing li tags, as well as the content that you want to display. For example, if you wanted to display a list of items, you would use the following code:

Item 1
Item 2
Item 3

Once you have created the list item code, you can then add images to it. To do this, you will need to use the tag. This tag allows you to specify the source of the image, as well as the size and other attributes. For example, if you wanted to add an image of a cat to the list item code, you would use the following code:

Item 1 
Item 2
Item 3

The tag should be placed inside the li tags, and the src attribute should point to the location of the image. You can also specify the size of the image using the width and height attributes.

Once you have added the images to the list item code, you can then style them using CSS. For example, if you wanted to add a border to the images, you could use the following code:

Item 1 
Item 2
Item 3

This code will add a 1px black border to the images. You can also use other CSS properties to style the images, such as background-color, padding, and margin.

By following these steps, you should now be able to add different images to your list item code with pre HTML tags. This can be a great way to make your website more visually appealing and engaging.