Jump to content
ksnyde

Changing namespace of Font Awesome

Recommended Posts

ksnyde    0
ksnyde

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
Rob    547
Rob

I'll bump this to the developers.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Andrew    201
Andrew

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]

  • Like 1

Share this post


Link to post
Share on other sites
ksnyde    0
ksnyde

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
Simon    247
Simon

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
beardedavenger    158
beardedavenger

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. 


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×