Repository: vitmalina/w2ui

Issue #508: w2ui 1.3.2 doesn't work with FontAwesome 4.0
Created: 2014-04-12T21:04:09Z
There are two problems:

FontAwesome 4.0 uses the <i> element so <span> no longer works.
For some reason the font-family from w2ui-reset takes precedence over the CSS from FA.

Workarounds:
I commented out the line in w2ui-1.3.2.css:
.w2ui-reset * {
  color: default;
  /*font-family: Verdana, Arial;*/

And I replaced the two <span> elements next to w2ui-tb-image in w2ui-1.3.2.js.
Afterwards, this works in a toolbar:
{ type: 'menu', id: 'addMenu', icon: 'fa fa-plus', caption: 'Add ...', items: [ ...

Duplicate issue #1444: fa- icons don't show up
Created: 2017-01-03T17:43:49Z
Currently i have the following code:
var pstyle = 'border: 2px solid #dfdfdf; padding: 5px;';
// first define a layout
$('#layout').w2layout({
    name: 'layout',
    panels: [
        { type: 'top', size: 45, style: pstyle},
        { type: 'left', size: 200, resizable: true, style: pstyle},
        { type: 'main', style: pstyle }
    ]
});

// then define the sidebar
w2ui['layout'].content('left', $().w2sidebar({
	name: 'sidebar',
	img: null,
	nodes: [
		{ id: 'level-1', text: 'Level 1', img: 'icon-folder', expanded: true, group: true,
		  nodes: [ { id: 'level-1-1', text: 'Level 1.1', icon: 'fa-home' },
				   { id: 'level-1-2', text: 'Level 1.2', icon: 'fa-star' },
				   { id: 'level-1-3', text: 'Level 1.3', icon: 'fa-check' }
				 ]
		},
		{ id: 'level-2', text: 'Level 2', img: 'icon-folder', expanded: true, group: true,
		  nodes: [ { id: 'level-2-1', text: 'Level 2.1', img: 'icon-folder',
					 nodes: [
					   { id: 'level-2-1-1', text: 'Level 2.1.1', img: 'icon-page' },
					   { id: 'level-2-1-2', text: 'Level 2.1.2', img: 'icon-page' },
					   { id: 'level-2-1-3', text: 'Level 2.1.3', img: 'icon-page' }
				 ]},
				   { id: 'level-2-2', text: 'Level 2.2', img: 'icon-page' },
				   { id: 'level-2-3', text: 'Level 2.3', img: 'icon-page' }
				 ]
		},
		{ id: 'level-3', text: 'Level 3', img: 'icon-folder', expanded: true, group: true,
		  nodes: [ { id: 'level-3-1', text: 'Level 3.1', img: 'icon-page' },
				   { id: 'level-3-2', text: 'Level 3.2', img: 'icon-page' },
				   { id: 'level-3-3', text: 'Level 3.3', img: 'icon-page' }
				 ]
		}
	],
	onClick: function (event) {
		w2ui['layout'].content('main', 'id: ' + event.target);
	}
}));

w2ui['layout'].content('top', $().w2toolbar({
  name: 'toolbar',
  items: [
    { type: 'check',  id: 'item1', caption: 'Check', img: 'icon-page', checked: true },
    { type: 'break',  id: 'break0' },
    { type: 'menu',   id: 'item2', caption: 'Drop Down', img: 'icon-folder', items: [
      { text: 'Item 1', icon: 'icon-page' },
      { text: 'Item 2', icon: 'icon-page' },
      { text: 'Item 3', value: 'Item Three', icon: 'icon-page' }
    ]},
    { type: 'break', id: 'break1' },
    { type: 'radio',  id: 'item3',  group: '1', caption: 'Radio 1', icon: 'fa-star', checked: true },
    { type: 'radio',  id: 'item4',  group: '1', caption: 'Radio 2', icon: 'fa-star-empty' },
    { type: 'spacer' },
    { type: 'button',  id: 'item5',  caption: 'Item 5', icon: 'fa-home' }
  ]
}));

The problem is that no fa-icon is visible. And when i change the icon to icon-page for example, it also doesn't work.

Closing comment (2017-01-04T10:19:38Z): Possible duplicate of #508
Please state which version of w2ui and which version of Font Awesome you're using.
Try adding the fa class to the icons (see my comment and example fiddle here: #508 (comment))