如何在图像的左侧添加图标？答案

【问题标题】：How to add icons on the left side of an image?如何在图像的左侧添加图标？
【发布时间】：2021-12-24 06:37:36
【问题描述】：

我有以下代码，我知道出了点问题，但我不知道是什么。

<!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>

我想在图像的左侧添加图像。我知道出了点问题，但我无法弄清楚。如何在图片左侧添加这些图标？

【问题讨论】：

不要使用来自本地计算机的路径，例如C:facebook（缺少/ 或``反正）- 使用相对于您的网络服务器的路径。您是否有一个网络服务器正在运行？
请添加您的代码，如 CSS 类、图像，并尝试重现问题，以便社区可以轻松理解。
使用图片占位符以便我们可以看到网页的状态。例如：image-placeholder.
您可以发布您想要的示例图片吗？或者您可以参考的某个网站，您在哪里看到过类似的 iamge？

标签： html css image

【解决方案1】：

最好的方法是使用fontawesome。你有两种可能：

第一种可能性：从 CDN 链接加载 fontawesome 资源：

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

第二种可能性：使用link 下载 fontawesome 文件并在您的项目中创建名为 font 的文件夹并将 fontawesome 文件放入：

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

这是所有使用 fontawesome 和 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>

图片：

【讨论】：

【解决方案2】：

您忘记通过在</li> 之后添加</ul> 来关闭ul 元素；
您还应该在图像上方的 HTML 中添加列表。这将确保它们出现在 img 元素之前（和左侧）。
您还应该将 CSS 文件添加到 float 底部的 div 元素到 left。

【讨论】：

【解决方案3】：

为了简洁和方便，采用 CSS & Sprite sheet 如果您将图像和图标列表 (ul) 都放在它们自己的容器中，您可以 float 左侧的图标出现在图像之前，即使它们是物理声明的在img 元素之后。

/* 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>

【讨论】：