CSS-无法在图标周围转圈

问题描述 投票:0回答:1

好,您可以在图像中看到,我有一个带圆圈的图标。为了我的一生,我无法在图标周围画圈。

Icon - circle这个span标签创建图像

<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 css
1个回答
0
投票

您是否尝试过像这样简单的事情?

HTML

<i class="far fa-star border-circle"></i>

CSS:

.border {
  border: 2px solid #000;
  border-radius: 50%;
  padding: 20px;
}

https://codepen.io/Legareto/pen/abvaYVP

© www.soinside.com 2019 - 2024. All rights reserved.