Custom Font Icon - Some not Appear
Question

Hi all,

I added some custom font icons but some of them not appear in screen.

What i understood is that the icons with more than one CSS Class not works, for example:

.icon-training .path1:before {
  content: "\e90f";
  color: rgb(39, 104, 223);
}
.icon-training .path2:before {
  content: "\e910";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}



Someone have idea how it's possible to solve this problem?

Thanks in advance, Paulo Torres

Solution

The solution is to replace the follow code:

.icon-training .path1:before {
  content: "\e90f";
  color: rgb(39, 104, 223);
}
.icon-training .path2:before {
  content: "\e910";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}

For this:

.icon-training:before {
  content: "\e90f";
  color: rgb(39, 104, 223);
}
.icon-training:after {
  content: "\e910";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}


If we have more than two Path's will be more complex, but i have only two path's.

Yes, that's one of the solutions, I did in the past, sorry for not saying that. I was thinking about having more than one path :( That is really tricky.

Happy that you managed to find the solution.

Regards,

Márcio C.

Champion

Dear Paulo 

Better is if you use Font Awesome for the icons in Web Applications. 

Please look into below references to use fa-icons

https://www.outsystems.com/forge/component-overview/5174/icons-for-everyone-web-font-awesome

https://www.outsystems.com/forge/component-overview/1958/font-awesome-cheatsheet

https://www.outsystems.com/forums/discussion/45091/fontawesome-pro-integration/


Please feel free to ask in case of any question.

Thanks

I had the same problem, and someone told me that I needed to join everything going in one path, there is editors that can do that, bue I didn't search yet that. After joking, go to the iconmoon and generate the font again.

Hi Marcio,

Thanks, i cannot implement this solution.

But with this i understood the behavior and i discovered the solution.

Solution

The solution is to replace the follow code:

.icon-training .path1:before {
  content: "\e90f";
  color: rgb(39, 104, 223);
}
.icon-training .path2:before {
  content: "\e910";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}

For this:

.icon-training:before {
  content: "\e90f";
  color: rgb(39, 104, 223);
}
.icon-training:after {
  content: "\e910";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}


If we have more than two Path's will be more complex, but i have only two path's.

Yes, that's one of the solutions, I did in the past, sorry for not saying that. I was thinking about having more than one path :( That is really tricky.

Happy that you managed to find the solution.

Regards,

Márcio C.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.