Jump to content


Photo
- - - - -

Changing namespace of Font Awesome

framework conflict

This topic has been archived. This means that you cannot reply to this topic.
5 replies to this topic

#1 ksnyde

ksnyde

    Super Member

  • Members
  • 177 posts

Posted 23 September 2012 - 01:34 PM

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.

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts

Posted 23 September 2012 - 03:50 PM

I'll bump this to the developers.

#3 arpowers

arpowers

    Founder

  • Administrators
  • 3271 posts

Posted 24 September 2012 - 07:17 PM

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:

Please Login or Register to see this Hidden Content



#4 ksnyde

ksnyde

    Super Member

  • Members
  • 177 posts

Posted 24 December 2012 - 08:09 PM

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:
 

Please Login or Register to see this Hidden Content

 

 

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.



#5 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts

Posted 24 December 2012 - 08:25 PM

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.



#6 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts

Posted 26 December 2012 - 03:22 PM

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.