How can I put an Icon or gif beside my item list in html?-CodePudding

<!DOCTYPE html>
<head>
    <title>Hanieh jannesari</title>
    <style>
        ul{
            list-style: none;
        }
        ul li{
            background-image: url ('tiny. gif'/'https://cdn.dribbble.com/users/166034/screenshots/4252718/media/d0338106a8519f3120dd9a3536b95d6b.gif');
            background-repeat:no-repeat ;
        }
    </style>
</head>
<body >
    <ol type="1" start="1">
        <li>color of love</li>
        <li>color of fame</li>
        <li>color of anger</li>
    </ol>
    <ul type="star" >
        <li>color of love</li>
        <li>color of fame</li>
        <li>color of anger</li>
    </ul>
</body>

I decided to insert some icons beside each list item in the ul, but unfortunately when I refer it locally to the folder I stored in my system (located in the same directory) and I link it to the http address, it does not work. I wonder what is wrong with the above code?

CodePudding user response：

You should use before to show your gif before your list. I insert this but your image is too big, it is better to use icon or svg and with hover give it animate

ul{
            list-style: none;
        }
        ul li{
            background-image: url ('https://cdn.dribbble.com/users/166034/screenshots/4252718/media/d0338106a8519f3120dd9a3536b95d6b.gif');
            background-repeat:no-repeat ;
        }
        ul li::before{
 content:'';
background:url('https://cdn.dribbble.com/users/166034/screenshots/4252718/media/d0338106a8519f3120dd9a3536b95d6b.gif'); /* with class ModalCarrot ??*/
   /*or absolute*/
 /*a number that's more than the modal box*/
  
  width:40px;
  height:20px;
  display:inline-block;
  margin-right:5px;
  z-index:10;
  background-position:center;
}

<!DOCTYPE html>
<head>
    <title>Hanieh jannesari</title>

</head>
<body >
    <ol type="1" start="1">
        <li>color of love</li>
        <li>color of fame</li>
        <li>color of anger</li>
    </ol>
    <ul type="star" >
        <li>color of love</li>
        <li>color of fame</li>
        <li>color of anger</li>
    </ul>
</body>

CodePudding user response：

Adding

background-size: cover;
height: 100vh;

to the css works and it will insert the gif in your ul li element.

You can see its working example below.

<!DOCTYPE html>

<head>
  <title>Hanieh jannesari</title>
  <style>
    ul {
      list-style: none;
    }
    
    ul li::before {
      content: '';
      background: url('https://cdn.dribbble.com/users/166034/screenshots/4252718/media/d0338106a8519f3120dd9a3536b95d6b.gif');
      width: 70px;
      height: 80px;
      display: inline-block;
      margin-right: 5px;
      z-index: 10;
      background-position: center;
    }
  </style>
</head>

<body>
  <ol type="1" start="1">
    <li>color of love</li>
    <li>color of fame</li>
    <li>color of anger</li>
  </ol>
  <ul type="star">
    <li>color of love</li>
    <li>color of fame</li>
    <li>color of anger</li>
  </ul>
</body>

and if you don't want the gif in the text's left position then you can try out :

<!DOCTYPE html>
<head>
  <title>Hanieh jannesari</title>
  <style>
    ul {
      list-style: none;
    }
    
    ul li {
      content: '';
      background: url('https://cdn.dribbble.com/users/166034/screenshots/4252718/media/d0338106a8519f3120dd9a3536b95d6b.gif');
      width: 70px;
      height: 150px;
      margin-right: 5px;
      margin-top: 10px;
      z-index: 10;
      background-position: center;
    }
  </style>
</head>

<body>
  <ol type="1" start="1">
    <li>color of love</li>
    <li>color of fame</li>
    <li>color of anger</li>
  </ol>
  <ul type="star">
    <li>color of love</li>
    <li>color of fame</li>
    <li>color of anger</li>
  </ul>
</body>