如何使用字体可怕的图标一个又一个

Question

我是Web开发的新手。我有一张桌子，

现在我正在使用

<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>

但这给了我

那么，如何获得第一个图像中的那个？

使用解决方案后

我要做的是

<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>

Answer 1

将您的<i>包裹在div中，然后将以下样式设置为div：

display: inline-flex;
flex-direction: column;

Answer 2

使用解决方案后，您需要减小图标的大小，请使用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;
}

每个图标将采用您设置的大小