CODEWITHSUNDEEP
htmlcssbootstrap-4font-awesome
ganesh kaspate
ganesh kaspate

Reputation: 2685

How do use the font awsome icons one above another

I am new to the web development. I have a table ,

enter image description here

Now I am doing this using the

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

Now, I tried with the two fa icons ,

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

But it gives me

enter image description here

So, How do get the one which is in the first image ?

After using the solution

enter image description here

what I have done is 

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

Upvotes: 2

Views: 1000

Answers (2)

TheDev
TheDev

Reputation: 415

After using the solution you need decrease the size of the icons, use css for this like this:

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

each icon will assume the size you set

Upvotes: 0

strblr
strblr

Reputation: 950

Wrap your <i>s in a div and set the following styles to the div :

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

Upvotes: 3

Related Questions