带有 label 和边框的字体真棒图标

Question

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

该图标实际上来自字体真棒。

这是我到目前为止所取得的成就：

 <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 还是很陌生，想学习最佳实践。

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

Answer 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;
}

还描述了放置边界内部的 div 和非其边缘。

演示： 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/

带有 label 和边框的字体真棒图标

问题描述

1 个解决方案

解决方案1
0 2020-12-29 23:18:00

带有 label 和边框的字体真棒图标

问题描述

1 个解决方案

解决方案1 0 2020-12-29 23:18:00

解决方案1
0 2020-12-29 23:18:00