gpt4 book ai didi

html - 在 fa 图标周围创建一个圆圈

转载 作者:太空宇宙 更新时间:2023-11-04 01:27:21 26 4
gpt4 key购买 nike

大家好,我正在尝试围绕我的 fa 图标创建一个圆圈,例如:

enter image description here

我已经制作了除圆形边框之外的所有东西,我不知道如何让这个效果起作用,到目前为止我有这个:

HTML:

<div class="row icon-set">
<div class="col-md-3 text-center">
<p>
<i class="fa fa-lightbulb-o"></i>
</p>
<p class="title"><span class="underline-text">Awesome</span>
</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>

CSS:

.parrlex1 .underline-text {
border-color: rgba(239,239,239,.5);
border-bottom-style: solid;
display: inline-block;
border-bottom-width: 3px;
padding-bottom: 7px;
}

.parrlex1 .title {
color: #ccb08a;
margin-top: 28px;
margin-bottom: 10px;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
font-weight: 700;
}

.icon-set .fa-lightbulb-o {
font-size: 40px;
width: 100%;
height: 100%;
border-radius: 50%;
}

我唯一无法工作的部分是图标周围的半径

感谢帮助

最佳答案

为父容器设计样式可能比图标本身更好(参见图标容器类)。我将宽度、高度和边框半径移动到父容器,然后使用平移使图标在圆中居中。希望这对您有所帮助!

.underline-text {
border-color: rgba(239, 239, 239, .5);
border-bottom-style: solid;
display: inline-block;
border-bottom-width: 3px;
padding-bottom: 7px;
}

.title {
color: #ccb08a;
margin-top: 28px;
margin-bottom: 10px;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
font-weight: 700;
}

.icon-container {
position: relative;
width: 200px;
height: 200px;
border: 2px solid red;
border-radius: 50%;
margin: auto;
}

.icon-set .fa-lightbulb-o {
font-size: 40px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<div class="row icon-set">
<div class="col-md-3 text-center">
<p class="icon-container">
<i class="fa fa-lightbulb-o"></i>
</p>
<p class="title"><span class="underline-text">Awesome</span>
</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>

关于html - 在 fa 图标周围创建一个圆圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47823493/

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