Как использовать шрифт потрясающие иконки один над другим - PullRequest
Новая
       6

Как использовать шрифт потрясающие иконки один над другим

0 голосов
/ 06 марта 2019

Я новичок в веб-разработке. У меня есть стол,

enter image description here

Теперь я делаю это, используя 

<th scope="col">Total Resumes<i className="fa fa-fw fa-sort sort-icon" onClick={() => props.sortCountAndScoreAscending('resumeCount')}></i></th>

Теперь я попробовал с двумя иконками fa, 

<th scope="col">Technology
                <i className="fa fa-sort-asc sort-icon" onClick={(event) => props.sortAscending(event, 'technology')}>
                </i>
                <i className="fa fa-sort-desc sort-icon" onClick={(event) => props.sortAscending(event, 'technology')}>
                </i>
            </th>

Но это дает мне

enter image description here

Итак, как получить тот, который на первом изображении?

После использования раствора

enter image description here

что я сделал, это 

<th>
 <div className="d-inline-flex flex-column">
      <i className="fa fa-angle-up sort-icon" aria-hidden="true" onClick={() => props.sortData(props.type)}></i>
      <i className="fa fa-angle-down sort-icon" aria-hidden="true" onClick={() => props.sortData(props.type)}></i>
    </div>
</th>

Ответы [ 2 ]

2 голосов
/ 06 марта 2019

Оберните ваши <i> s в div и установите следующие стили для div: 

display: inline-flex;
flex-direction: column;
0 голосов
/ 06 марта 2019

После использования решения вам нужно уменьшить размер значков, используйте для этого css следующим образом: 

 <th scope="col">Technology
    <i className="icon-base fa fa-sort-asc sort-icon" onClick={(event) => props.sortAscending(event, 'technology')}></i>
    <i className="icon-base fa fa-sort-desc sort-icon" onClick={(event) => props.sortAscending(event, 'technology')}></i>
 </th>

.icon-base {
   height: 10px;
   width: 10px;
}

каждый значок будет иметь заданный вами размер

...