Archived

This topic is now archived and is closed to further replies.

  • 0

Changing namespace of Font Awesome


Question

Posted · Report post

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.

Share this post


Link to post
Share on other sites

5 answers to this question

Posted · Report post

I'll bump this to the developers.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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. 

Share this post


Link to post
Share on other sites

Posted · Report post

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]

1 person likes this

Share this post


Link to post
Share on other sites