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..
3rd part icon Library
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Can you please attach the link of your icon library for us?
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Please follow these steps;
- please add css and flags folders into src/main/webapp/resources/
- please change url in flag-icon.css;
Exp;
- 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;
Example;
Screenshot;
- 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*/
}
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" />
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
You're welcome! Thanks for the update!
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 17 guests