Jurgen,
Instead of using
font-family: font-awesome,
try
font-family: FontAwesome;
Also, you need to use different content, see http://fontawesome.bootstrapcheatsheets.com.
For example:
content:"\f000";
This gives you the first icon on that page. On that cheatsheet page simply click "Copy" below the icon you want and select CSS rule to have it copied to your clipboard.
The menu items <a>
(at least in 5.14.0) seem to have mx-name-... classes for automation purposes. This number seems to be generated algorithmically and may in fact remain constant. As an example you might have:
<a
data-item-id="159b6aef-dbc3-5b23-a735-cf99f8341771-0"
class="mx-name-159b6aef-dbc3-5b23-a735-cf99f8341771-0"
href="#">
Administration
<b class="caret"></b>
</a>
Perhaps something like:
.mx-name-159b6aef-dbc3-5b23-a735-cf99f8341771-0:before{
font-family: MyCustomFontFamily;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
content: "\1234";
}
For example adding the youtube icon from the Foundation Icon set:
a.mx-name-159b6aef-dbc3-5b23-a735-cf99f8341771-0:before{
font-family: "foundation-icons";
src: url("foundation-icons.eot");
src: url("foundation-icons.eot?#iefix") format("embedded-opentype"),
url("foundation-icons.woff") format("woff"),
url("foundation-icons.ttf") format("truetype"),
url("foundation-icons.svg#fontcustom") format("svg");
font-weight: normal;
font-style: normal;
content: "\f1ea";
}
Thank you Ockert. I try to do like your suggestion and I put my code like this
a.mx-name-159b6aef-dbc3-5b23-a735-cf99f8341771-2:before{
font-family: "font-awesome";
src: url("styles/font-awesome-4.4.0/fonts/fontawesome-webfont.eot");
src: url("styles/font-awesome-4.4.0/fonts/fontawesome-webfont.eot?#iefix") format("embedded-opentype"),
url("styles/font-awesome-4.4.0/fonts/fontawesome-webfont.woff") format("woff"),
url("styles/font-awesome-4.4.0/fonts/fontawesome-webfont.woff2") format("woff2"),
url("styles/font-awesome-4.4.0/fonts/fontawesome-webfont.ttf") format("truetype"),
url("styles/font-awesome-4.4.0/fonts/fontawesome-webfont.svg#fontcustom") format("svg");
font-weight: normal;
font-style: normal;
content: "<i class="fa fa-camera-retro"></i>";
}
It doesn't work. How should I do?