FONT AWESOME: USE IN A CSS CLASS

There is a way to use font awesome icons in a class so that they are automatically used in the ::before and ::after attributes/things.

The example below is a snippet from some mega menu code used on https://www.applesofgold.com

The mega menu is pretty nice and simple to use. Easy styling updates for whatever the site needs. Github source:

https://github.com/marioloncarek/megamenu-js

Note that you can find the unicode (css "content") assignment if you go to font awesome and click on the icon. See screenshot below with the tiny red arrow pointing to it.

.menu-mobile:after {
content: "\f0c9";
font-family: "FontAwesome";
font-size: 2.5rem;
padding: 0;
float: right;
position: relative;
top: 50%;
-webkit-transform: translateY(-25%);
-ms-transform: translateY(-25%);
transform: translateY(-25%);
}
.menu-dropdown-icon:before {
content: "\2b";
font-family: "FontAwesome";
display: none;
cursor: pointer;
float: right;
padding: 1.5em 2em;
background: #fff;
color: #333;
}