Как сверстать иконку play?

Question

[Conera]

Практикую верстку и в первой же секции (header) проблема.
Если попадается в макете иконка play подобного рода - как на фото. Как ее можно/лучше сделать? и как обычно справляться с такими задачами?

Comments

[Froggyweb]

inline SVG или SVG спрайт

Answer 1

[exspool]

Подключаете Font Awesome
Пишите:

<i class="fa fa-play-circle" aria-hidden="true"></i>

https://fontawesome.ru/icon/play-circle/

Comments

[Сергей delphinpro]

Ради одной иконки подключать целый FA — так себе идея.
Лучше взять оттуда же отдельную иконку в svg формате и вставить в страницу.

[exspool]

Ну если уж такая песня, то можно еще хардкорнее сделать на чистом CSS:

.play-button {
  border-radius: 50%;
  background: gray;
  width: 100px;
  height: 100px;
  position: relative;
}
.play-button::before {
  content: "";
  position: absolute;
  border: 25px solid transparent;
  top: 25%;
  left: 40%;
  border-left: 40px solid #fff;
}

[Conera]

Сергей delphinpro, а при верстке все иконки обязаны быть в точь точь как в макете или можно подставлять альтернативные варианты?

[exspool]

Conera, Это уже все обсуждается с заказчиком. Если для себя делаете, для практики, то не стоит заморачиваться. Если проект "боевой" - тогда детали уже обуджаються, нужен ли pixel perfect или допустимы минимальные отклонения.

[Сергей delphinpro]

exspool, можно и на css. Если иконка гарантированно одна. Но чаще их много, ли позже появятся. Лучше делать однотипно. И поменять проще при необходимости.

Conera, это описано в ТЗ или оговаривается с заказчиком.

Answer 2

[Максим]

https://codepen.io/topicstarter/pen/OJpJrYo - вот так примерно

Answer 3

[EmeraldGuy]

Вот такой вариант подойдёт?
https://codepen.io/chrisdwheatley/pen/cJKIr

Answer 4

[Maly]

Попробуй добавить a:hover и при наведений поменять цвет. Станет красивее и живее. Я лично так делал.