如何用 css 改变圆的粗细？

Question

我用 html 和 css 做了以下设计，因为你会看到圆看起来有点粗，它的轮廓。

本设计制作如下：

    .fa-stack-1x, .fa-stack-2x {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }

    .fa-stack-2x {
        font-size: 2em;
    }

    .size-icon-about {
        font-size: 0.8em;
    }

<div class="col-md-2 mb-r wow fadeInUp" data-wow-delay=".3s">
        <span class="fa-stack fa-3x">
         <i class="fa fa-circle-thin fa-stack-2x icon-blue"></i>
         <i class="fa fa-briefcase size-icon-about icon-blue"></i>
        </span>
        <h3 class="text-body-about mt-3">Subtitle</h3>
    </div>

我基本上使用以下 fontawesome 图标：https://fontawesome.com/v4.7.0/icon/circle-thin

我希望它看起来像这样：

Answer 1

你不能 - 线条粗细内置于字体中，你无法更改它。然而，幸运的是，通过使用 border-radius: 50% 和 border-width: <n>px，使用纯 HTML/CSS 很容易绘制圆圈，其中 n 是您想要的线的粗细。您需要进行一些位置调整以使公文包在其中居中。唯一的问题是缩放 - 如果您需要图像以多种比例显示，则必须适当地设置边框粗细，在这种情况下，您可能会被迫回到 svg 解决方案。

编辑：我确实找到了 'cheat' 的另一种方法 - 您可以使用 text-stroke 来部分 trim 字体粗细，例如：-webkit-text-stroke: 2px white;

Answer 2

实际上在这种情况下，您没有减少字体图标笔划的选项。但是我们可以使用如下所示的假方法来调整它。

在这里我删除了图标圈并创建了我自己的。从 border 属性你可以轻松调整圆的边框大小。这可以用作透明图标。

方法一

/* .fa-stack-1x, .fa-stack-2x {
  

bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
} */

.fa-stack-2x {
  font-size: 2em;
}

.size-icon-about {
  font-size: 0.8em;
}

.circle {
  display: inline-flex;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid #111111;
  position: relative;
}


.fa-briefcase {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>


<div class="col-md-2 mb-r wow fadeInUp" data-wow-delay=".3s">
    <span class="fa-stack fa-3x">
     <span class="circle">
       <i class="fa fa-briefcase size-icon-about icon-blue"></i>
     </span>         
    </span>
    <h3 class="text-body-about mt-3">Subtitle</h3>
</div>

方法二

我在这里创建了另一个 <span class="circle">，它是绝对定位的，并更改了它的高度和宽度值，因为我们可以在图标圆圈上看到一个细边框。但这不能用作透明图标，因为我们的圆圈有背景色。为此，您需要将 circle 背景设置为与图标下方的部分背景相同。

/* .fa-stack-1x, .fa-stack-2x {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
} */

.fa-stack-2x {
  font-size: 2em;
}

.size-icon-about {
  font-size: 0.8em;
}

.circle {
  display: inline-flex;
  width: 77px;
  height: 77px;
  border-radius: 50%;
  background-color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.fa-circle-thin {
  position: relative;
}

.fa-briefcase {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>


<div class="col-md-2 mb-r wow fadeInUp" data-wow-delay=".3s">
    <span class="fa-stack fa-3x">
     <i class="fa fa-circle-thin fa-stack-2x icon-blue">
       <span class="circle"></span>
     </i>
     <i class="fa fa-briefcase size-icon-about icon-blue"></i>
    </span>
    <h3 class="text-body-about mt-3">Subtitle</h3>
</div>

如何用 css 改变圆的粗细？

How to change the thickness of a circle with css?

css

font-awesome

方法一

方法二