ReactJs Наложение шрифта - PullRequest
Новая
       6

ReactJs Наложение шрифта

0 голосов
/ 31 января 2020

Я хочу спросить, как мы можем складывать иконки Font Awesome в ReactJS.

В HTML мы используем следующий код: 

<span class="fa-stack fa-2x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>

И в ReactJS мы используйте: 

<FontAwesomeIcon icon={faFlag} />

Как наложить круг на пользователя так, чтобы он выглядел так, как будто значок флага находится в круге

1 Ответ

0 голосов
/ 31 января 2020

Йо может сделать что-то подобное и играть с positioning и flex: 

.the-wrapper {
  position: relative;
}

.the-wrapper .icon {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>

<span class="fa-stack fa-2x the-wrapper">
  <FontAwesomeIcon icon={faCircle} />
  <div class="icon">
    <FontAwesomeIcon icon={faFlag} />
  </div>
</span>
...