Question

我正在尝试在文本旁边对齐图标。我已经使用了：before标记，但是似乎没有用？是因为我使用的是Google图标吗？下面是我要复制的代码

.review {
  width: 317px;
  height: 25%;
}
    
.review h2 {
  color: white;
  font-style: normal;
  font-weight: bold;
  font-size: 30px;
  line-height: 23px;
  margin-left: 15px;
}
    
.review p {
  color: white;
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 16px;
  text-transform: capitalize;
  transition: 0.3s;
  /* margin: 20px; */
}

<div class="review">
  <h2>Reviews</h2>
  <i class="material-icons" style="color:#FFF9F9; font-size:20px; ">check_box_outline_blank </i>
  <p class="rec">Most Recent</p>
  <p>Most Relevant</p>
</div>

Answer 1

请先用google询问有关SO的问题。只是通过搜索您的问题，我在第一个链接中找到了您的答案。这是关于SO的另一个问题。点击here。

只需将两个项目都放在<div>元素中，并使用css类display: inline-block，如示例中所示。

<div>
  <i class="material-icons" style="color:#FFF9F9; font-size:20px; ">check_box_outline_blank </i>
  <p style="display: inline-block" class="rec">Most Recent</p>
</div>

Answer 2

对不起，您的问题不是很清楚，但是使用Google图标应该不是问题。我的建议是使用css网格解决布局问题（因为您提供的代码是html和css）。

这是一个有用的链接： https://www.w3schools.com/css/css_grid.asp

grid-column应该可以解决您的问题：有两列，第一列用于图像，第二列用于文本。您还可以添加网格行以获得更好的布局

Answer 3

我认为您想要带有链接的图标。将其放在段落标签中。

尝试将图标对齐到文本旁边

3 个答案: