Icon for Menu

0
Hi guys, I want to customize font icon for mendix menu. I know what mendix has gryphicon for me but if I want to use icon from the other source like font awesome. Any ideas for this ? Thank you
asked
3 answers
1

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.

answered
1

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"; 
}
answered
0

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?

answered