Как развернуть значок FontAwesome - PullRequest
Новая
       29

Как развернуть значок FontAwesome

0 голосов
/ 23 февраля 2019

Я использую следующий шрифт Font Awesome на своем сайте с SVG: https://fontawesome.com/icons/toggle-on?style=solid

Как я могу расширить ширину этого шрифта Font Awesome, но не высоту?

Ответы [ 2 ]

0 голосов
/ 23 февраля 2019

Как правило, вы не можете изменить ширину / высоту значка, если не отрегулируете какое-либо свойство SVG, например preserveAspectRatio, например, которое не даст вам хорошего результата 

svg {
  width:200px;
  height:50px;
  color:red;
}
<svg aria-hidden="true" preserveAspectRatio="none" focusable="false" data-prefix="fas" data-icon="toggle-on" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" ><path fill="currentColor" d="M384 64H192C86 64 0 150 0 256s86 192 192 192h192c106 0 192-86 192-192S490 64 384 64zm0 320c-70.8 0-128-57.3-128-128 0-70.8 57.3-128 128-128 70.8 0 128 57.3 128 128 0 70.8-57.3 128-128 128z" class=""></path></svg>

Другая идея состоит в том, чтобы просто воссоздать это, используя чистый CSS, и вы можете легко масштабировать ширину иконки: 

.icon {
  display:inline-block;
  height:60px;
  width:200px;
  border-radius:60px;
  background:
    radial-gradient(circle at calc(100% - 30px) 50%, transparent 20px,orange 21px);
}
<div class="icon">
</div>
<div class="icon" style="width:120px;">
</div>

<div class="icon" style="width:60px;">
</div>

Вы также можете контролировать высоту, добавляя переменные CSS: 

.icon {
  --h:30px;
  display:inline-block;
  height:calc(2*var(--h));
  width:200px;
  border-radius:calc(2*var(--h));
  background:
    radial-gradient(circle at calc(100% - var(--h)) 50%, transparent calc(var(--h) - 10px),orange calc(var(--h) - 9px));
}
<div class="icon">
</div>
<div class="icon" style="width:120px;--h:40px;">
</div>
<div class="icon" style="width:100px;--h:20px;">
</div>
<div class="icon" style="width:60px;">
</div>

Вы также можете получить эффект переключения, настроив background-position: 

.icon {
  --h:30px;
  display:inline-block;
  height:calc(2*var(--h));
  width:200px;
  border-radius:calc(2*var(--h));
  background:
    radial-gradient(circle , transparent calc(var(--h) - 10px),orange calc(var(--h) - 9px));
  background-size:calc(200% - 2*var(--h)) 100%;
  transition:1s;
}

.icon:hover {
  background-position:100% 0;
}
<div class="icon">
</div>
<div class="icon" style="width:120px;--h:40px;">
</div>
<div class="icon" style="width:100px;--h:20px;">
</div>
<div class="icon" style="width:60px;">
</div>
0 голосов
/ 23 февраля 2019

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

Хотя попробуйте: 

i{
height: 50px;
width: 200px;
}

Поиграйтесь с шириной, но оставьте высоту на фиксированном значении.

...