How To Add A Icon Inside A Spinner

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 m

Solution 1:

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> 

Solution 2:

Like this maybe

.test {
  display: inline-block;
  padding: 20px;
}
.spinner-circle {
  width: 50px;
  height: 50px;
  position: relative;
  margin: 20px;
}
.spinner {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  border: 5px solid rgba(0,0,0,0.3);
  border-right: 5px solid red;
  animation: rotate--spinner 1.6s linear infinite;
  box-sizing: border-box;
}
.icon {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  font-size: 50px;
}

@keyframes rotate--spinner {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

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

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

Solution 3:

Here's my go

HTML

<div class="loader-container">
    <span>icon</span>
    <div class="loader"></div>
</div>

CSS

 .loader {
    border: 16px solid #f3f3f3;
    /* Light grey */
    border-top: 16px solid #3498db;
    /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
 }

 .loader-container {
    position: relative;
    display: inline-block;
 }

 .loader-container span {
    position: absolute;
    top: 45%;
    left: 45%;
 }

 @keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
 }

Codepen