Jump to content
theTimHunter

Bootstrap Icons - Messing up Site

Recommended Posts

theTimHunter    1
theTimHunter

Hello,

I'm using some bootstrap code in a universal sidebar to arrange my header just how I want it. I'm trying to add the phone icon and number below the login area. I can easily add the phone number, but once I add the html for the icon everything on the page gets messed up. The page currently only has the phone number since it becomes illegible with the use of the icon.

Anyone else had this issue? Seems like a weird tiny thing to have such a drastic effect. Thanks in advance.

http://www.discovery...rcing.com/test/

Share this post


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

Hi there, can you paste in the code you're apply to the sidebar so we can take a look.

Are you wrapping the shortcodes in PL_raw tags?


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
stelip    3
stelip

Hi, I am currently having a problem with the bootstrap icons, so I though I would paste it here. (Latest version of page lines). I am trying to show the "right arrow" on a button, I am finding that its not showing very cleanly, it looks like there are two images being layered which are offset slightly. The "pagelines" icon looks ok though???

see https://portal.ipmxlabs.com/button-test Is there a problem with the font pagelines is using?

using the following code, (Have tried short codes as well)


<button class="btn btn-success" type="button">Monitor&nbsp;<i class="icon-pagelines icon-white"></i></button>

<button class="btn btn-success" type="button">Monitor&nbsp;<i class="icon-arrow-right"></i></button>

<button class="btn btn-success" type="button">Monitor&nbsp;<i class="icon-arrow-right icon-white"></i></button>

Best regards

steve

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

@Steve - The new Font Awesome icons color is based on the font color, therefore there is no need to use icon-white from what I can see. View the code below as an example, it changes the color of the PageLines leaf to blue but doesn't touch the Monitor text, which remains white.

<button class="btn btn-success" type="button">Monitor&nbsp;<i class="icon-pagelines" style="color:blue"></i></button>[/CODE]


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
stelip    3
stelip

Hi Danny,

If I just change the icon to "icon-arrow-right" in your example it messes up, do you see the same

steve

Share this post


Link to post
Share on other sites
stelip    3
stelip

Hi Danny,

Sorted it, I needed to deactivate the "bootstrap Icons" plugin, as its now included with pagelines.

Looks like it dosn't work in IE9 though?

Best regards

Steve

  • Like 1

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

What are you seeing in IE, can you take a screenshot please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
stelip    3
stelip

Hi Danny,

This is what I am seeing in IE9

post-34318-0-63445700-1348838962_thumb.j

Best regards

steve

Share this post


Link to post
Share on other sites
theTimHunter    1
theTimHunter

Hi there, can you paste in the code you're apply to the sidebar so we can take a look.

Are you wrapping the shortcodes in PL_raw tags?

This post has been hijacked! I was not using the PL_raw tags but I also have the bootstrap plugin installed. Maybe if I just uninstall that?

Thanks

Share this post


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

Hi there, did you manage to get this working by removing the bootstrap icons? Let us if you require further help.


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.
       
       
    • 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

    • brightonkeller
      By brightonkeller+
      For some reason my Tabbed content isn't working correctly (see this page - click on all tabls)
       
      It could TOTALLY be the shortcodes I've got in there but I wanted to see if any of you could pinpoint the issue faster than I could. Any help would be must appreciated. 
       
      attached is a screenshot of what I see.
       
      And here is the code I have in the edit html...
      [pl_raw][pl_tabs][pl_tabtitlesection type="tabs"] [pl_tabtitle active="yes" number="1"]Currently Obsessed[/pl_tabtitle] [pl_tabtitle number="2"]gifts for him[/pl_tabtitle] [pl_tabtitle number="3"]Office // Desk[/pl_tabtitle] [pl_tabtitle number="4"]PLAID TREND[/pl_tabtitle] [pl_tabtitle number="5"]GIFT IDEAS[/pl_tabtitle] [pl_tabtitle number="6"]baubles[/pl_tabtitle] [pl_tabtitle number="7"]FUR VESTS[/pl_tabtitle] [/pl_tabtitlesection] [pl_tabcontentsection] [pl_tabcontent active="yes" number="1"] [show_boutique_widget id="122328"] [/pl_tabcontent] [pl_tabcontent number="2"] [show_boutique_widget id="201724"] [/pl_tabcontent] [pl_tabcontent number="3"] [show_boutique_widget id="203968"] [/pl_tabcontent] [pl_tabcontent number="4"] [show_boutique_widget id="201832"] [/pl_tabcontent] [pl_tabcontent number="5"] [show_boutique_widget id="176320"] [/pl_tabcontent] [pl_tabcontent number="6"] [show_boutique_widget id="203960"] [/pl_tabcontent] [pl_tabcontent number="7"] [show_boutique_widget id="176328"] [/pl_tabcontent] [/pl_tabcontentsection] [/pl_tabs][/pl_raw]
×