3rd part icon Library

Locked
Giordano
Posts: 15
Joined: 11 Sep 2015, 15:58

16 Nov 2016, 02:40

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..

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

17 Nov 2016, 15:59

Can you please attach the link of your icon library for us?

Giordano
Posts: 15
Joined: 11 Sep 2015, 15:58

19 Nov 2016, 04:41

Yes....


Here it is..

http://flag-icon-css.lip.is/

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

21 Nov 2016, 08:59

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;
Image

Giordano
Posts: 15
Joined: 11 Sep 2015, 15:58

25 Nov 2016, 20:05

Cool...

It Works!! Thanks aragorn..

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

28 Nov 2016, 09:23

You're welcome! Thanks for the update!

Locked

Return to “Sentinel”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest