好,您可以在图像中看到,我有一个带圆圈的图标。为了我的一生,我无法在图标周围画圈。
<span class="share-icon icon"></span>
这是图像的css:
.icon {
opacity: 1;
transition: all .3s ease-in-out;
}
.share-icon {
border-radius: 50%;
display: inline-block;
height: 50px;
position: absolute;
width: 50px;
z-index: 10000;
border: 1px solid #fff;
&:before {
content: '';
display: block;
mask: url(/assets/all/images/share.svg);
-webkit-mask: url(/assets/all/images/share.svg);
position: absolute;
left: 3px;
width: 16px;
height: 16px;
background: none;
border-radius: 0;
mask-size: 16px 16px;
-webkit-mask-size: 16px 16px;
background-color: #fff;
top: 3px;
transform: scale(2.5);
}
}
您能提供的任何帮助都会很棒。预先感谢。
您是否尝试过像这样简单的事情?
HTML
<i class="far fa-star border-circle"></i>
CSS:
.border {
border: 2px solid #000;
border-radius: 50%;
padding: 20px;
}