I tried adding an icon from font awesome to my html code. The icon ' question circle 'shows up in the UI part but I can't set the size through the CSS. Also I can't change the color of the icon in CSS.
<label htmlFor='vaccine' className='labelField' >
Preferred Vaccine
<i className="fa fa-question-circle"></i>
</label><br></br>
.fa fa-question-circle{
font-size: x-large;
}
Font Awesome has some dedicated components for ReactJS
Check this link: https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react
You can easily style your icons and set size:
<FontAwesomeIcon icon="faCoffee" size="2x" />
className:
<FontAwesomeIcon icon="faCoffee" className='myClassName' />
or many other props
if you want a 5x icon size you need to pass it to the react class as size
// Font awesome pixel sizes relative to the multiplier.
// 1x - 14px
// 2x - 28px
// 3x - 42px
// 4x - 56px
// 5x - 70px
<i className="fa fa-question-circle" size={70}></i>
if you notice it jumps by 14 each time
from the github readme it shows everything is overridden inline. its rendering a svg so you cant use 5x you have to use a pixel size
Simple do this ->
<i class="fa fa-question-circle fa-2x"></i>
or use these instead:
fa-xs;
fa-sm;
fa-lg;
fa-2x;
fa-3x;
fa-5x;
fa-7x;
fa-10x;
<i className="fa fa-question-circle your_class"></i>