【问题标题】：How to place an icon before a text?如何在文本前放置图标？
【发布时间】：2022-11-24 06:39:38
【问题描述】：

我想在我的网站上的“Mon compte”文本之前放置一个图标。

这是我的 HTML 代码：

<a href="/user" class="secondary-nav__menu-link secondary-nav__menu-link--link secondary-nav__menu-link--level-1" data-drupal-link-system-path="user">
  Mon compte
</a>

这是我的 CSS 代码：

#block-useraccountmenu a::before {
    content: "";
    display: block;
    background: url("/themes/subtheme_olivero/images/person-circle.svg?itok=5") no-repeat;
    width: 28px;
    height: 28px;
    float: left;
    margin: 0 6px 0 0;
}

它工作正常，这是输出：

我的问题是，当我右键单击链接时，图标位于文本的中间。我不明白为什么渲染会这样变化：

如果我在它旁边单击，图标会正确重新定位。如何纠正这个问题？我的 CSS 代码有什么问题？谢谢

更新

如果我将 CSS 应用于“a”，则当右键单击文本时，图标会以文本为中心。

如果我将 CSS 应用于“li”，它工作正常，但我希望面部图标成为链接的一部分。

小澄清，我不能修改 HTML 代码，我不想为单个图标使用外部库。

【问题讨论】：

我们可以有代码吗？ #block-useraccountmenu 不存在，没有任何内容是可复制的！
你的代码有效。问题一定出在别处
你可以加一个sn-p吗？？？

标签： html css icons pseudo-element

【解决方案1】：

也许使用 Font Awesome 可能更容易。首先插入CDN：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"/>

然后转到他们的icon page 并选择一个图标（确保它不是“专业”图标）。看起来这就是您想要的：

<i class="fa-solid fa-user"></i>

在那之后，就很容易了。只需将该行（或不同的图标）粘贴到您的文本之前：

<a href="/user" class="secondary-nav__menu-link secondary-nav__menu-link--link secondary-nav__menu-link--level-1" data-drupal-link-system-path="user">
  <i class="fa-solid fa-user"></i> Mon compte
</a>

而已！您可能需要使用 font-size 和其他规则来设置样式。

编辑：

CDN 最多可以减少的内容是这样的：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/fontawesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/solid.min.css"/>

这种方法虽然有2个URLs，但是比第一种方法好很多。

【讨论】：

@Mathieu，您可以通过将border-radius: 51%; 和border: 2px solid #000000; 添加到图标的CSS 来将我建议的图标变成您想要的图标
我不想加载 CBN 或将库用于单个图标

【解决方案2】：

您可以尝试使用 img 元素，而不是使用背景图像。代码看起来像这样。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

.input-container {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 100%;
  margin-bottom: 15px;
}

.input-field {
  width: 100%;
  padding: 10px;
  outline: none;
  text-align: left;
}

</style>
</head>
<body>

  <div class="input-container">
    <img src="img_girl.jpg" alt="Girl in a jacket" width="50" height="60">
    <div class="input-field"> Mon compte </div>
  </div>

</body>
</html>

【讨论】：

我不能编辑 HTML 代码，只能编辑 CSS 代码
请尝试在您的背景属性中添加背景位置 > background: url("/theme/subtheme olivero/images/person-circle.svg?itok=5") no-repeat left center;
嗨 Mathieu，如果网站是 cocorinet.fr，我似乎找不到“我的帐户”链接。其他带有图标的链接似乎运行良好。如果这不是网站，请分享。谢谢。
你好@Mathieu，我现在看到了。您能否确认 (1) 使用 Chrome 和 Edge 时应用程序看起来不同，以及 (2) 问题仅出现在 Edge 中；您已经在 Chrome 中尝试过并且可以正常工作。谢谢。 (Chrome) ibb.co/CBnTL2w (Edge) ibb.co/YDY0knG (Edge 有问题) ibb.co/WWMZWvC
嗨@Mathieu，能够隔离遇到的问题。这似乎是由 ::before 选择器引起的。我删除了选择器并没有再遇到问题。希望这可以帮助。