html - 如何使用 Font Awesome 图标在另一个之上

Question

我是网络开发新手。我有一张 table ，

现在我正在使用

<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> s 放在 div 中，并为该 div 设置以下样式:

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