如何将图标放在<a>标记文本旁边

将图标放在<a>标记文本旁边有多种方法，以下是两种常见的方法：

方法一：使用CSS伪元素 可以通过CSS伪元素的方式，在<a>标记内部创建一个伪元素，并在该伪元素中设置背景图片为图标，通过调整伪元素的位置来实现图标和文本的相邻显示。

HTML代码示例：

<a href="#" class="icon-link">Link</a>

CSS代码示例：

.icon-link {
  position: relative;
  padding-left: 20px; /* 为图标留出空间 */
}

.icon-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url('icon.png'); /* 替换为图标的实际路径 */
  background-size: cover;
  background-position: center;
  /* 其他样式属性，如背景颜色、边框等 */
}

在上述示例中，通过设置.icon-link::before的样式，创建一个伪元素，并使用background-image属性指定图标的路径。通过调整position、top、left和transform等属性，使伪元素垂直居中并与文本相邻显示。

方法二：使用Font Awesome或其他图标字体库 可以使用图标字体库，如Font Awesome，将图标作为字体的一部分嵌入到页面中。通过在<a>标记内部添加一个<i>标签，并为其添加字体库中的图标类名，实现图标和文本的相邻显示。

HTML代码示例：

<a href="#"><i class="fa fa-rocket"></i>Link</a>

在上述示例中，使用Font Awesome图标库，为<i>标签添加了fa和fa-rocket类名。fa表示通用的Font Awesome类名，fa-rocket表示具体的图标类名。可以通过调整图标类名来显示不同的图标。

需要注意的是，在使用图标字体库之前，需要先引入相应的字体库文件和CSS样式文件。具体的引入方式可根据不同的图标字体库而定。

以上是两种常见的方法，根据具体情况选择适合的方法来实现将图标放在<a>标记文本旁边。