how to import and use an icon font

hi !


i'm trying to use material's font on my app


first i imported the font and after and then pasted this on my css


@font-face {

  font-family: 'Material Icons';

  font-style: normal;

  font-weight: 400;

  src: url(/OneClick/materialdesignicons-webfont.eot); /* For IE6-8 */

  src: local('Material Icons'),

    local('MaterialIcons-Regular'),

    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),

    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),

    url(/OneClick/materialdesignicons-webfont.ttf) format('truetype');

}

.material-icons {

  font-family: 'Material Icons';

  font-weight: normal;

  font-style: normal;

  font-size: 24px;  /* Preferred icon size */

  display: inline-block;

  line-height: 1;

  text-transform: none;

  letter-spacing: normal;

  word-wrap: normal;

  white-space: nowrap;

  direction: ltr;




but still i cant make it work

Solution

Hi Carolina,

Did you deploy the resources to target directory? The links are correct? Did you check and follow all the steps of this document? At the end of the document there are steps on how to use custom icon font in Outsystems.

Regards,

Marcelo

Solution

Actually I did

but when i try to do this part:


https://thumbs.gfycat.com/BigHealthyCuckoo-mobile.mp4 the pop-up doesn't appear, it only shows the icon flag and the proporties screen isnt the same, i don't have style class option



Hi,

What do you see there? which version are you using? because my version is a bit more advance than the one that was used to record that clip but I still have style classes.

Regards,

Marcelo

I'm using the latest one. This is my icon properties.

Are you using mobile or web? Because on web the way of using it is different.

Marcelo Ferreira wrote:

Are you using mobile or web? Because on web the way of using it is different.

im using web, how can i achieve it on web?


Hi,

In the document I shared before in the end shows hoe to do it on web. Check it here.

Regards,

Marcelo

Marcelo Ferreira wrote:

Hi,

In the document I shared before in the end shows hoe to do it on web. Check it here.

Regards,

Marcelo

Ok, i tried with the container and it didnt work again. I reviewed every steps and i can't understand whi is even importing the font.

I dragged a container and gave it the styleclass "mdi-card-search-outline" but it doesn't show up

Hi Carolina,

Can you send me a small module with what you are trying to do so I can look into it?

Regards,

Marcelo

Marcelo Ferreira wrote:

Hi Carolina,

Can you send me a small module with what you are trying to do so I can look into it?

Regards,

Marcelo


I just want to use some of these icons on my project.