Page 1 of 1
3rd part icon Library
Posted: 16 Nov 2016, 02:40
by Giordano
Hi Dear developers,
I tried to incorporate a 3rd part icon library that i could use on icon attribute of tags that uses it..
For example, i need to use country flag icons options on my menu items application. Therefore i downloaded flag icon library.
How could i incorporate flag icon library so that i may use it on icon attribute of <ps:menuitem> tag?
Thanks in advance..
Re: 3rd part icon Library
Posted: 17 Nov 2016, 15:59
by mert.sincan
Can you please attach the link of your icon library for us?
Re: 3rd part icon Library
Posted: 19 Nov 2016, 04:41
by Giordano
Re: 3rd part icon Library
Posted: 21 Nov 2016, 08:59
by mert.sincan
Please follow these steps;
- please add css and flags folders into src/main/webapp/resources/
- please change url in flag-icon.css;
Exp;
Code: Select all
.flag-icon-tr.flag-icon-squared {
background-image: url("#{resource['flags:1x1/tr.svg']}"); /* instead of background-image: url(../flags/1x1/tr.svg); */
}
- add <h:outputStylesheet name="flag-icon.css" library="css" /> into template.xtml
- Also, I think you can remove the following css in flag-icon.css;
Code: Select all
.flag-icon.flag-icon-squared {
/*width: 1em; OPTIONAL*/
}
Example;
Code: Select all
<p:menuitem id="sm_dashboard" value="Turkey" icon="flag-icon flag-icon-tr flag-icon-squared" outcome="dashboard" containerStyleClass="layout-menubar-active"/>
<p:menuitem id="sm_promotion" value="Brazil" icon="flag-icon flag-icon-br flag-icon-squared" outcome="promotion-page" />
Screenshot;
Re: 3rd part icon Library
Posted: 25 Nov 2016, 20:05
by Giordano
Cool...
It Works!! Thanks aragorn..
Re: 3rd part icon Library
Posted: 28 Nov 2016, 09:23
by mert.sincan
You're welcome! Thanks for the update!