带有标签和边框的字体真棒图标答案

【问题标题】：Font awesome icon with label and border带有标签和边框的字体真棒图标
【发布时间】：2021-04-06 12:41:28
【问题描述】：

我想在 HTML/CSS 中重现以下项目：

图标实际上来自 font awesome。

这是我目前取得的成就：

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
      integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
      crossorigin="anonymous"
    />

    <link
      href="https://fonts.googleapis.com/css2?family=Raleway&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>

<div class="search__filters__option">
  <div class="filter__icon"><i class="fas fa-dog"></i></div>
  Animaux autorisés
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Raleway", sans-serif;
}

.search__filters__option {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-right: 15px;
  border-bottom: 2px solid #f2f2f2;
  border-top: 2px solid #f2f2f2;
  border-right: 2px solid #f2f2f2;
  text-align: center;
  border-radius: 20px;
  font-weight: bold;
  margin-right: 10px;
}

.search__filters__option:hover {
  background-color: #deebff;
  color: #0065fc;
  cursor: pointer;
}

.filter__icon {
  margin-right: 10px;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  color: #0065fc;
  background-color: #deebff;
  display: flex;
  justify-content: center;
  align-items: center;
}

我的代码有两个问题：

1- 它与图像中的内容不完全匹配，（例如，彩色圆圈的大小不正确）。

2- 我不知道我的代码是否干净，因为我对 CSS 还是很陌生，想学习最佳实践。

提前感谢您的帮助和解释！

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您已经提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。
我觉得你已经有了正确的代码 :) 我检查了它.. 看起来很相似！如果您还有什么想法，请告诉我:)
@ImranRafiqRather 结果并不完全相同，例如圆圈的顶部和底部与周围的灰色边框之间有一个小间隙。
当您说“例如，彩色圆圈的大小不合适）。你到底想指出什么。 :)
试试这个：jsfiddle.net/9eq1o7nu/4

标签： html css font-awesome

【解决方案1】：

您的代码看起来不错。您可以像这样使用box-shadow:inset，而不是您的边界定义：

.search__filters__option {
  box-sizing: border-box;
  -webkit-box-shadow: inset 0px 0px 0px 2px #f2f2f2;
  -moz-box-shadow: inset 0px 0px 0px 2px #f2f2f2;
  box-shadow: inset 0px 0px 0px 2px #f2f2f2;
}

还描述了placing-border-inside-of-div-and-not-on-its-edge。

演示：https://jsfiddle.net/pr6htj01/

要获得更多不透明度，请使用支持不透明度值作为最后一个参数和/或更深颜色的颜色的 rgb 表示法：

  -webkit-box-shadow: inset 0px 0px 0px 2px rgba(128, 128, 128, 0.2);
  -moz-box-shadow: inset 0px 0px 0px 2px rgba(128, 128, 128, 0.2);
  box-shadow: inset 0px 0px 0px 2px rgba(128, 128, 128, 0.2);

演示：https://jsfiddle.net/z7b6ey19/

【讨论】：

谢谢，这与我想要的非常接近，但是使用这种方法生成的“边框”缺乏不透明度，有什么办法可以改善吗？
您可以使用 rgb 颜色而不是十六进制值，例如 rgba(242, 242, 242, 1) 而不是 #f2f2f2，但我认为我一般会使用较深的颜色，例如rgba(128, 128, 128, 0.4) 或 #ddd
谢谢，这有点好，但我碰巧是一个完美主义者，它与我的源图片不完全匹配^^'也许比保持使用边框的解决方案可以实现...