CSS

Question

我需要精确地重新创建一个图标。我从 font awesome 得到的那个不完全一样，这是区别 -

底部图片是我需要的样子。我可以使用 border-radius 在图标周围创建圆圈吗？我怎么做？

我有直接从 FA 编码的图标 -

 <i class="fa fa-angle-down fa-3x" aria-hidden="true"></i>

Answer 1

你可以堆叠字体很棒的图标，所以只需在你的图标上添加一个圆圈，就像这样：

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-angle-down fa-3x" aria-hidden="true"></i>
</span>

查看 http://fontawesome.io/examples/ 示例。

Answer 2

试试下面的代码：

 <i class="fa fa-chevron-circle-down" aria-hidden="true"></i>

Answer 3

尝试圆角 class of bootstrap 4 这样做。 https://v4-alpha.getbootstrap.com/utilities/borders/

或者您可以尝试为人字形赋予相同的高度和宽度，并将 border-radius 指定为 50%

希望对您有所帮助

Answer 4

即使没有CSS

你也可以这样做

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-angle-down fa-2x fa-stack-1x fa-inverse"></i>
</span>

Answer 5

试试这个

.xyz{
width:150px;
height:150px;
background:blue;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div class="xyz">
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x" style="color:#fff"></i>
  <i class="fa fa-chevron-down fa-stack-1x"></i>
</span>
</div>

CSS - 边界半径

CSS - border radius

html

border