Jump to content


Photo
- - - - -
Resolved

Weird Issue With Icon Font

bootstrap icons funky business

  • Please log in to reply
9 replies to this topic

#1 Beny Schonfeld

Beny Schonfeld

    Advanced Member

  • Members
  • 60 posts
  • LocationMiami, FL
  • Framework Version:2.3.3
  • Country: Country Flag

Posted 24 October 2012 - 01:06 PM

Hi there...

When I updated to the latest version of Pagelines I started encountering a weird issue with the Bootstrap icons I'm using throughout the site. There's a weird shadow showing up, it's like the icon is there a couple of times, sometimes in same color and sometimes in different colors... The result is illegible icons...

URL:

Please Login or Register to see this Hidden Content

-> you can view the problem in the purple buttons near the top, and in orange buttons that are further down...

Another example:

Please Login or Register to see this Hidden Content

-> check out the arrow icons being used in orange buttons... all wack!

Please advice! Thanks!

Beny Schonfeld

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 24 October 2012 - 02:50 PM

I think you're referring to the text shadow being added to the text. You can get rid of it by using the "none" value in the CSS attribute text-shadow for the menu items like this:

Please Login or Register to see this Hidden Content



#3 Beny Schonfeld

Beny Schonfeld

    Advanced Member

  • Members
  • 60 posts
  • LocationMiami, FL
  • Framework Version:2.3.3
  • Country: Country Flag

Posted 24 October 2012 - 04:33 PM

I think you're referring to the text shadow being added to the text. You can get rid of it by using the "none" value in the CSS attribute text-shadow for the menu items like this:

Please Login or Register to see this Hidden Content


I tried that... It's not the text shadow. It looks like the icon is being placed on top of itself..

I'm wondering... before the last update, in which PL now has the icons as an icon font, there was a plugin we needed to have in order to use the bootstrap icons. Maybe that's the problem? I'm using the icon font AND the plugin at the same time?? let me check that right now...

Yep. If I deactivate the pagelines twitter bootstrap icons plugin the problem goes away...

OK. problem solved. we can close this one.

#4 Beny Schonfeld

Beny Schonfeld

    Advanced Member

  • Members
  • 60 posts
  • LocationMiami, FL
  • Framework Version:2.3.3
  • Country: Country Flag

Posted 24 October 2012 - 04:49 PM

One more question regarding these icons...

In the wordpress editor, in HTML mode I'm typing this:

Please Login or Register to see this Hidden Content


I update the page, and when it reloads the HTML is being changed to:

Please Login or Register to see this Hidden Content


Wordpress is changing it by itself... does it matter? Am I doing something wrong here?

#5 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 24 October 2012 - 04:52 PM

The issue you're seeing is not what I'm seeing (on Firefox for Mac). Can you please post a screenshot of the issue?

#6 Beny Schonfeld

Beny Schonfeld

    Advanced Member

  • Members
  • 60 posts
  • LocationMiami, FL
  • Framework Version:2.3.3
  • Country: Country Flag

Posted 24 October 2012 - 05:06 PM

The issue you're seeing is not what I'm seeing (on Firefox for Mac). Can you please post a screenshot of the issue?


On Chrome it looks like this (blown up):
Posted Image

And it should look like this:

Posted Image

blown up:
Posted Image

Once I turn off the Pagelines Boostrap Icons Plugin the icons display correctly... (on Chrome)

But now I'm wondering what's the deal with wordpress changin my HTML from <i class="... to <em class="

Any thoughts on that?

#7 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 24 October 2012 - 05:15 PM

<em> is pretty much the same as <i> (but I believe <em> is the preferred standard so that's why WP does this - it's better explained here:

Please Login or Register to see this Hidden Content

B).

Please try deactivating all active plugins to see if the buttons are affected.

#8 Beny Schonfeld

Beny Schonfeld

    Advanced Member

  • Members
  • 60 posts
  • LocationMiami, FL
  • Framework Version:2.3.3
  • Country: Country Flag

Posted 24 October 2012 - 05:22 PM

RE: <i> vs <em>: got it... done...

RE: the plugin that is causing the icon issue, it's a plugin by Pagelines called "Bootstrap Icons" which was required in order to use the bootstrap icons prior to Pageline's last theme update. Now that the framework includes the icons as an icon font, the plugin isn't needed anymore. I you're running the latest version of Pagelines, AND that plugin, it seems it will place 2 icons one on top of each other, but not in the exact position, causing the issue I described.

I turned that plugin off. Issue resolved.

Thanks

#9 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 25 October 2012 - 12:36 AM

We now have font awesome built directly into the framework, this uses the same shortcode to call the icons as bootstrap icons. So fontawesome has pretty much replaced bootstrap icons. If you have both active, as they both use the same shortcode, one will lay on top of the other.

To find out more on font awesome check out

Please Login or Register to see this Hidden Content



#10 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 25 October 2012 - 12:36 AM

The topic was marked as resolved.





Also tagged with one or more of these keywords: Resolved, bootstrap, icons, funky business