如何在微调框内添加图标 [英] How to add a icon inside a spinner

问题描述

如果我能够自由修改html，我能够做到这一点，但问题是我只能使用这个特定的布局来制作这个微调。

我想制作的微调框是这样的，

有一个粉红色的微调器可以在灰色的路径上走动，中间的图标保持静止。

问题是我必须得到上面的微调才能使用这个html布局

只有div

 < div class =spinner>< / div> 
  

包含图标的Div。

 < div class =spinner> 
< i class =mickey>< / i> 
< / div> 
  

图标字体或图片可用于中间的图标。

编辑：链接到 JSFiddle

解决方案

这里甚至可以使用伪选择符：before，：after 或通过为 spinner 声明另一个div ，如LGSon所示，你所做的是你应用了 transform：rotate 在父元素这就是为什么它是旋转整个 div ，因此请尝试以下操作，

.spinner {width：100px;高度：100像素;边界半径：50％;边框：10px实体＃111;保证金：10％40％;位置：相对; z-index：1;}。spinner：before {content：'';宽度：100像素;高度：100像素;边界半径：50％; border-top：10px solid #ccc; border-right：10px solid transparent; border-bottom：10px实体透明; border-left：10px solid transparent;位置：绝对的;的z-index：9;顶部：-10px;左：-10px;动画：rt 2s infinite;} @ keyframes rt {from {transform：rotate（0deg）; }到{transform：rotate（360deg）; }}。spinner> .fa {font-size：32px;文本对齐：中心;显示：块; margin：30％0;}

< link rel = stylesheethref =https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css>< div class =spinner> < i class =fa fa-anchor>< / i>< / div>

I'm able to do this if I'm able to freely modify the html, but the problem is I'm restricted to using a this one specific layout to make this spinner.

The spinner that I want to make is something like this,

There is the pink spinner which goes around and around the grey path and an icon in the middle which stays still.

The problem is I have to get the above spinner to work with just this html layout

Only a div

<div class="spinner"></div>

Div with an icon inside.

<div class="spinner">
 <i class="mickey"></i>
</div> 

An icon font or an image can be used for the icon in the middle.

EDIT: Link to JSFiddle

解决方案

Here you could try this even using pseudo selector :before,:after or by declaring another div for spinner as shown by LGSon, what you did is that you have applied transform:rotate on parent div that's why it is rotating whole div, so try as below,

.spinner{
  width:100px;
  height:100px;
  border-radius:50%;
  border:10px solid #111;
  margin:10% 40%;
  position:relative;
  z-index:1;
}
.spinner:before{
  content:'';
  width:100px;
  height:100px;
  border-radius:50%;
  border-top:10px solid #ccc;
  border-right:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:10px solid transparent;
  position:absolute;
  z-index:9;
  top:-10px;
  left:-10px;
  animation:rt 2s infinite;
}
@keyframes rt{
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
}
.spinner > .fa{
  font-size:32px;
  text-align:center;
  display:block;
  margin:30% 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="spinner">
 <i class="fa fa-anchor"></i>
</div> 

这篇关于如何在微调框内添加图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！