289
Views
6
Comments
Reactive Icon
Application Type
Reactive

Hi Team,

I have inserted the icon in the footer layout, it's look like normal (default). But I wanted to display the icon in the below manner. Please give me some advice to fix the problem.

MY DESIGN:

WANTED TO BE:


2022-05-19 14-01-44
Varada Rajan

HI Sarvigaa Arivalagan,

Just consider this as a task and not a problem.
I have attached a few links below which can guide us how to Create Custom Icons and also
how to use them in our Environment.

hope it helps!!
Beyond Spritely Images: Using Icon Fonts in OutSystems
Using Custom font for icons | OutSystems

2022-05-19 14-01-44
Varada Rajan

Try with the CSS modification like in the Attached oml, attached sample working link here:

Working Link, also attached the oml, to look into CSS/class modifications(you can always improvise).

But I would suggest these kind of modifications are not best practice, instead create a custom icon and get it added.

Regards,
Varada Rajan

ForumAnswer.oml
UserImage.jpg
Sarvigaa Arivalagan

Thank You. Now I'm Done

2023-12-14 09-56-57
Yogesh Javir

Hey,

Short-cut solution is like create common  css class which has background-color:transparent!important; property  and apply same class to icon.

hope you will understand. 

thanks

Yogesh

2023-12-01 11-04-17
Megan Bonnema

Hi @Sarvigaa Arivalagan 

You can use the different Facebook icon in OutSystems and apply this class styles below to every Icon and it should look similar to what you want.

border-radius: var(--border-radius-circle);

padding: var(--space-s);

background-color: var(--color-neutral-10);

color: var(--color-neutral-0);

UserImage.jpg
Sarvigaa Arivalagan

Thank You Megan, I done

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