gpt4 book ai didi

html - Font-Awesome Circle 带有数字和阴影

转载 作者:行者123 更新时间:2023-11-28 05:17:37 26 4
gpt4 key购买 nike

如何使用 font awesome创建一个带有边框和阴影的数字的圆圈?对于带有数字和边框的圆圈,我找到的典型答案会产生方形阴影而不是圆形阴影(至少我尝试这样做的方式)。

我找到了创建带阴影的圆圈的解决方案,但它不适用于 #'s。它生成的是椭圆形,而不是圆形。

enter image description here

#blah {
box-shadow: 0 1px 10px rgba(255, 0, 0, 0.46);
}

.icon-wrapper {
display: inline-block;
}

.page-number-core {
border: 3px solid #fff;
padding: 10px;
-webkit-border-radius: 1100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
box-shadow: 0 1px 10px rgba(255, 0, 0, 0.46);
text-align: center;
display: table-cell;
vertical-align: middle;
}

.fix-editor {
display: none;
}

.bold {
font-weight: bold;
}
<!DOCTYPE html>
<html>

<head>
<link data-require="font-awesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>

<body>
<div class='bold'>Incorrect shadow</div>
</br>
<div>
<span class="fa-stack fa-3x">
<i id='blah' class="fa fa-circle-o fa-stack-2x"></i>
<strong class="fa-stack-1x">1</strong>
</span>
</div>
</br>
<div class='bold'>Produces an Oval - Not a Circle</div>
</br>
<div class="icon-wrapper">
<i class="fa page-number-core page-number-dark">
<span class="page-number-text page-number-text-light">1</span>
</i>
</div>
<br/><br/>
<div class='bold'>Produces an Circle with Shadow but not for a #</div>
</br>
<div class="icon-wrapper">
<i class="fa fa-comment page-number-core page-number-dark">
<span class="page-number-text page-number-text-light fix-editor">&nbsp;</span>
</i>
</div>
</br>
<div>
<a href="http://codepen.io/Onomicon/pen/iDfld">Source of Circle with Shadow</a>
</div>
</body>

</html>

最佳答案

为了满足问题的确切要求,我稍微修改了@Michael Arrison 的答案,使其适用于 Font-Awesome。

重点是 Font-Awesome CSS 类 fa-3x使用 em用于设置大小:

.fa-3x {
font-size: 3em;
}

因此 heightwidth .circle类也应在 em 中指定使整个事情适用于不同的字体大小。

而且因为 Font-Awesome CSS 类的圈子 fa-circle-o不使用 100% 的可用高度和宽度,.circle 的大小类是 5.1em而不是 6em .

.circle {
display: flex;
border-radius: 50%;
width: 5.1em;
height: 5.1em;
justify-content: center;
align-items: center;
-webkit-box-shadow: 0px 0px 10px 0px rgba(255, 0, 0, 0.46);
-moz-box-shadow: 0px 0px 10px 0px rgba(255, 0, 0, 0.46);
box-shadow: 0px 0px 10px 0px rgba(255, 0, 0, 0.46);
}
<div class="circle">
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<strong class="fa-stack-1x">1</strong>
</span>
</div>


提示:

使用 fa-lg 时而不是 fa-3x对于堆栈,.circle 的正确大小类是 2.2em。

关于html - Font-Awesome Circle 带有数字和阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43239170/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com