How to use font awesome in css

hey guys!

I am trying to center the following font awesome in my drop down menus and the picture that I would like to use is as follows:

how would I define the class? Would I do something like this :

.fas fa-caret-down {



You can try applying the text-align property to the block element that contains your font awesome icon.

This is the idea of it anyway without knowing how your HTML is laid out.


<div class="drop-down-menus">
font awesome icon


.drop-down-menus {
    text-align: center;

That’s one way to do it.

Thanks for the quick reply… so i don’t have to use the i class?

Is there also a way to align both sides of text? I have only heard of justify, center, left and right

Take a look at the official documentation and how i elements are used.

Thanks but they have mentioned something about pseudo css… but nothing much about moving it around. I tried to use text-align: centre but that didn’t work… Maybe i should use position relative and absolute. I only know roughly that by using absolute, the top left corner does not move…

Did you spell it right?

It should be text-align: center;

Also, you can share your workspace via codepen so we can better assist you.

Sorry it should like

<div class="drop-down-menus">
    <i class="whichever fontawesome icon"> </i>

Like shimphillip said, if you can post your code we can better understand to help you.

Thanks guys!

I tried the method as suggested and it does work but for some reason, font awesome is not showing on certain pages: Font awesome should be showing in all pages in my nav bar because I include it in my header.php file but as shown below, some pages don’t display the fonts:


Sorry but I’m not familiar with PHP at all. The best thing I can suggest is to use your browsers Dev Tools (press F12) to examine the page. It might turn up some clues as to why. Keep on coding!

send me all code to me i will check it if you don’t mind