png image instead of font icon in SideNav

Forum to discuss the new web client version of Servoy.

png image instead of font icon in SideNav

Postby aliqazi01 » Wed Mar 20, 2019 8:45 am

Hi All,

is there a way that we can add png icon in a sideNav instead of using the font icons.
i am trying to achieve it by creating bootstrap extra custom css file added a class there
some-icon{
background : img path;
}

and call it from iconStyleClass but didnt work.

Best Regards,

Ali
aliqazi01
 
Posts: 14
Joined: Mon Nov 04, 2013 7:35 am

Re: png image instead of font icon in SideNav

Postby paronne » Thu Mar 21, 2019 10:01 am

Hi Ali,

the sidenav is meant to be used with font icons.
A quick work-around can be the following:

.menu-logo-png {
content: url('img_path.png');
max-width: 100%;
}

Regards,
Paolo
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm

Re: png image instead of font icon in SideNav

Postby aliqazi01 » Thu Mar 28, 2019 5:57 am

Hi Paolo,

Thank you for your reply. it worked like a charm.

Best Regards,

Ali
aliqazi01
 
Posts: 14
Joined: Mon Nov 04, 2013 7:35 am

Re: png image instead of font icon in SideNav

Postby Gordon McLean » Mon Jul 29, 2019 7:55 pm

Hi

I have what I think it a similar issue but I am not getting the same results. I want to change the iconStyleClass from the fa classes to my own client supplied SVG's. If I add a label and attach the css I get the icon image to display but I am not getting the same results when I am adding it to the iconStyleClass I am using the following:

.btn_docs {
display: block;
text-indent: -9999px;
background: url("../Graphics/Left_hand_side_icons/Docs.svg");
background-size: 20px 20px;
background-repeat:no-repeat;
}

SO the questions are:

a) Can you use a non FontAwesome icon ?
b) Where should the css be placed for this to be read by the sideNav component ?

Cheers
Gordon
Gordon McLean
Clickdigital.com
Gordon McLean
 
Posts: 253
Joined: Wed Aug 03, 2005 12:24 pm
Location: UK

Re: png image instead of font icon in SideNav

Postby mboegem » Tue Jul 30, 2019 1:43 pm

Hi Gordon,

You have a few questions here and I'm not sure if they are all directly related, but from what I understand you want a non FA-icon to be used in the sidebar.
This is possible, and I have seen this working with the styleclass as provided by Paolo.

You created a style class 'btn_docs' in your stylesheet.
The stylesheet will be hosted on this URL (I assume a default developer install):
Code: Select all
http://localhost:8080/resources/fs/<SOLUTIONNAME>/css/<STYLESHEET_NAME>>.css


Because the image references should have a path relative to the stylesheet, your Docs.svg should be available at:
Code: Select all
http://localhost:8080/resources/fs/<SOLUTIONNAME>/Graphics/Left_hand_side_icons/Docs.svg

Your first check should be if your icons are there by copy/paste this URL in the browser. Now, either your browser will display the svg image or download it.

Assuming it's available, just try this styleclass (you can use that in your own solution stylesheet):
Code: Select all
.side-nav-doc-svg {
content: url('../Graphics/Left_hand_side_icons/Docs.svg');
max-width: 100%;
}


The iconStyleClass property of your sidenav entries should be like :
Code: Select all
iconStyleClass: "side-nav-doc-svg"


That's it.

So, concerning your questions:
a) Yes you can use non FA icons
b) Just add the css to the solutions stylesheet file.
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image

Partner of Tower - The most powerful Git client for Mac and Windows
User avatar
mboegem
 
Posts: 1742
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam

Re: png image instead of font icon in SideNav

Postby Gordon McLean » Tue Jul 30, 2019 2:41 pm

Hi Marc
Thank you for taking the time to reply so comprehensively much appreciated

Good news first - Paolo suggested adding height and width to the SVGs and this has worked - so icon now works which bears out what you were saying

I can not get this work but I am very interested in why as it explans a lot about the structure of the Servoy app server that I was not fully understanding.

http://localhost:8080/resources/fs/<SOLUTIONNAME>/css/<STYLESHEET_NAME>>.css

My issues are:
Where is the file in developer hosted from as I was assuming [servoyfolder]/applicaiton-server/server/ROOT however I cant see any reference to resources or fs in that space

Assuming we can establish the above location then I would agree Docs.svg should be in the location you suggest

The following does insert the icon but its too large and as per Paolo's suggestion the height width sort that out. However as a way to insert a background svg this is spot on
Code: Select all
.side-nav-doc-svg {
content: url('../Graphics/Left_hand_side_icons/Docs.svg');
max-width: 100%;
}



AGAIN thank you for taking the time to reply its very helpful

Gordon
Gordon McLean
Clickdigital.com
Gordon McLean
 
Posts: 253
Joined: Wed Aug 03, 2005 12:24 pm
Location: UK

Re: png image instead of font icon in SideNav

Postby mboegem » Thu Aug 01, 2019 1:20 pm

Gordon McLean wrote:My issues are:
Where is the file in developer hosted from as I was assuming [servoyfolder]/applicaiton-server/server/ROOT however I cant see any reference to resources or fs in that space


the resources/fs folders are dynamically created by Servoy. These hold your css files, media files, etc.

So where is that 'Graphics' folder that holds your custom images? Are they coming from your media library?
In that case it all makes sense I guess.
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image

Partner of Tower - The most powerful Git client for Mac and Windows
User avatar
mboegem
 
Posts: 1742
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 6 guests