Changing namespace of Font Awesome

[ksnyde 0]

I have been using Twitter's Bootstrap for some time now so the addition of Font Awesome into Pagelines isn't a bad thing but the way it's been implemented it conflicts with the naming convention already used by Twitter's Glyphicons which while not vector based are better designed images in many cases. I would therefore like to change the CSS naming convention used for font-awesome. I have identified the location of this file as the icons.less file and changing all the definitions that start with .icon- to .vicon- should allow both icons and vector icons to co-exist but I don't understand your LESS->CSS compilation strategy. I would have expected to see a master LESS file with the import directives to move all the LESS definitions into a single CSS file but that's not there (or I don't see it).

Any help on how to remove this conflict would be greatly appreciated as I currently have hundreds of overlapping images on my site (one for the glyphicon, one for the font awesome icon). Note: this is not visible on production site which is using a much older code base than my development environment.

[Rob 547]

I'll bump this to the developers.

[Andrew 207]

Ya, the fix for this is probably to filter out the new core 'icons.less' file out of the array.

Then you can add your own as you did before (no conflict)

The filter you need to use is: pagelines_core_less_files

So something like:

add_filter('pagelines_core_less_files', 'remove_icons');


function remove_icons($core_less_array){


unset($core_less_array['icons']);


return $core_less_array;


}

[/CODE]

[ksnyde 0]

Ya, the fix for this is probably to filter out the new core 'icons.less' file out of the array.

Then you can add your own as you did before (no conflict)

The filter you need to use is: pagelines_core_less_files

So something like:

 

add_filter('pagelines_core_less_files', 'remove_icons');

function remove_icons($core_less_array){

unset($core_less_array['icons']);

return $core_less_array;

}

 

 

Great suggestion. In order to have full visibility into what I'm doing is there somewhere I can reference to understand which filters/actions are available from Pagelines? If not in the broader sense I really just want to know about both Bootstrap and FontAwesome as in both cases I'd rather be in control of the versioning of these.

[Simon 248]

Take a look in the /less/ folder.

 

You can override any of these easily in a child theme, simply create a /less/ folder in the child theme and copy the file you want to override. You can even just make it a blank file and the core will load the blank file rather than the parent.

[beardedavenger 158]

I do a lot of design with the icon lib, and the Glyphicons suck IMO because they are images. I utilize the Font Awesome lib every day, and I completely avoid the icons found in Bootstrap all together.