Jump to content
Beny Schonfeld

Weird Issue With Icon Font

Recommended Posts

Beny Schonfeld    1
Beny Schonfeld

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: http://designsbyfelicia.com -> you can view the problem in the purple buttons near the top, and in orange buttons that are further down...

Another example: http://www.designsbyfelicia.com/services/ -> check out the arrow icons being used in orange buttons... all wack!

Please advice! Thanks!

Beny Schonfeld


Beny Schonfeld

Appeando.com

On Twitter: @appeando

On Facebook: http://facebook.com/appeando

Share this post


Link to post
Share on other sites
catrina    103
catrina

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:

text-shadow: none;[/CODE]


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
Beny Schonfeld    1
Beny Schonfeld

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:

text-shadow: none;[/CODE]

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.


Beny Schonfeld

Appeando.com

On Twitter: @appeando

On Facebook: http://facebook.com/appeando

Share this post


Link to post
Share on other sites
Beny Schonfeld    1
Beny Schonfeld

One more question regarding these icons...

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


Learn more <i class="icon-circle-arrow-right"></i>

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

Learn more <em class="icon-circle-arrow-right"></em>

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


Beny Schonfeld

Appeando.com

On Twitter: @appeando

On Facebook: http://facebook.com/appeando

Share this post


Link to post
Share on other sites
catrina    103
catrina

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


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
Beny Schonfeld    1
Beny Schonfeld

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):

weird-icons-blownup.jpg

And it should look like this:

good-icon-100percent.jpg

blown up:

good-icon-blownup.jpg

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?


Beny Schonfeld

Appeando.com

On Twitter: @appeando

On Facebook: http://facebook.com/appeando

Share this post


Link to post
Share on other sites
catrina    103
catrina

<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: http://bytes.com/topic/html-css/answers/96586-em-vs-i-strong-vs-B).

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


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
Beny Schonfeld    1
Beny Schonfeld

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


Beny Schonfeld

Appeando.com

On Twitter: @appeando

On Facebook: http://facebook.com/appeando

Share this post


Link to post
Share on other sites
James B    436
James B

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 http://fortawesome.github.com/Font-Awesome/


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
James B    436
James B

The topic was marked as resolved.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

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


  • Similar Content

    • ppotent
      By ppotent
      Any chance of a pagelines table plug-in coming? I know that the use of short codes and bootstrap can achieve this, but I can't seem to find any easy/visual editor way of doing this. There are table plug-ins around for wordpress, but honestly, they are pretty clunky. I'd pay for a tables plug-in, given how much I would use tables if I could.
       
       
    • tforasiepi
      By tforasiepi+
      I'm taking a site out of development and putting it online.  I need a little help with the Framework 5 interface and icon links because they are not converting to the new URL.  The site is in a sub-folder and I followed the WordPress docs, like I usually do, about Giving Wordpress Its Own Directory . i.e.
      In Settings>General>Site Address changed it to the final URL Copied the index.php and .htaccess files to the root folder Edited the index.php to point to the subfolder and saved the file Now the site is up and running and I can still edit the theme in the Dashboard but the Framework 5 front end interface does not load on each page at the top.  In addition, the Social Media icons, slider icons, etc... don't show up.  However, they are linking to their destinations correctly.  I feel like I can missing a final step.  Can anyone suggest a resource or solution?
      The site is:  http://www.mnkhan.com/
      Thanks in advance!
       
    • nandorj78
      By nandorj78+
      I checked the demo for the new bootstrap theme (http://themes.pagelines.com/bootstrap/) and I really liked the slider on it. I suppose it was not done using 'impulse' or 'flick slider', was it? How was it done?
    • micstepl
      By micstepl+
      is Bootstrab (http://getbootstrap.com/ ) kompatible to PL5? how to install most fitting?
    • respectgb
      By respectgb+
      Hi,
      I'm having problems with bootstrap popovers being cut off the edge of the browser. I'm using the latest version of dms (2.2) and this problem occurs on all browsers tested. Please can you let me know how we can fix this?

      Cheers

×