Как сделать так, чтобы значок шрифта был заполнен блочным элементом? - PullRequest
Новая
       23

Как сделать так, чтобы значок шрифта был заполнен блочным элементом?

0 голосов
/ 29 января 2019

Я хочу сделать вращающуюся анимацию значка шрифта, но я не могу позволить центру быть в нужном месте. Поворот всегда немного смещен.

Вот пример: 

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

div {
  padding:0;
  margin:0;
}
.container {
  position:absolute;
  top:50px;
  left:50px;
  border:1px solid red;
  font-size:20px;
  
}

.inner {
  line-height:0;
  animation-name:circle;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet"/>
<div class="container"><div class="inner"><i class="fas fa-adjust"></i></div></div>

JSFiddle: https://jsfiddle.net/217z69sm/2/

Ответы [ 2 ]

0 голосов
/ 30 января 2019

Похоже, что шрифт-офигенный знает об этом, и есть предложение перейти на версию svg или использовать display: block:

Icon Animation + Wobbles

Мы усердно работали над тем, чтобы значки идеально центрировались, когда они вращаются или пульсируют.Однако мы наблюдали проблемы с несколькими браузерами и веб-шрифтами + CSS-версия Font Awesome.В результате большого количества исследований это кажется проблемой с веб-шрифтами в целом, а не тем, что мы можем исправить напрямую.У нас есть несколько способов обойти это:

Переключение фреймворков - Переключитесь на SVG с версией JavaScript, это работает намного лучше.Установить отображение значка анимации - Использовать дисплей: блок;где ты можешь.Похоже, это очень помогает в этом вопросе.

Взято из https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons

Не могу сказать, что вижу разницу, которую дает display: block, возможно, здесьдругие могут заметить это или добавить объяснение , почему это может помочь: 

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

div {
  padding:0;
  margin:0;
}
.container {
  position:absolute;
  top:50px;
  left:50px;
  border:1px solid red;
  font-size:20px;
  
}

.inner {
  line-height:0;
  animation-name:circle;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

#block {
  display: block;
}

.two {
  left: 75px;
}
<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet"/>
<div class="container"><div class="inner"><i class="fas fa-adjust"></i></div></div>
<div class="container two"><div class="inner"><i class="fas fa-adjust" id="block"></i></div></div>
0 голосов
/ 29 января 2019

Я анализирую, что значок имеет некоторые поля дисбаланса, что создает небольшое смещение, когда мы пытаемся повернуть его.здесь я переделываю тот же значок, проверяю, работает ли он у вас. 

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

.container {
  position:absolute;
  top:50px;
  left:50px;
  border:1px solid red;
  font-size:300px;
  
}
.inner {
  padding: 2px;
  animation-timing-function: linear;
  animation-name:circle;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.rot{
	border: 10px solid black;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-image: linear-gradient(to left,black 0%, black 50%,     white 50%,white 100%);
}
		<div class="container">
			<div class="inner">
				<div class="rot">
					
				</div>
			</div>
		</div>
...