Jump to content
waltersrs

Adding Icon Font to Scrollspy

Recommended Posts

waltersrs

How do I go about adding icons (fontawesome icon font) to Scrollspy menu items and other shortcodes built into PageLines?

 

 

<div class="scroll-header page-header" title="Key Terms">
<h1 style="text-align: center;">Key Terms <span style="color: #999999;"><small>that you need to know </small></span></h1>
</div>
 
In the above code, if I wanted to place an icon in the title, how would I do that?  Adding "<i class="icon-ok"></i>" seems to break it.  What am I missing or is this not possible?
 
Thanks.

Share this post


Link to post
Share on other sites
catrina

I don't think you can add another class within a heading, which is why the code breaks. If you need to add an icon, I think you'll need to use an <img> tag including the icon image since you wouldn't be able to "retrieve" it using Fontawesome.


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
Guest

Hi. I found this post when searching through the forums, and I thought my icon font shortcode plugin might come in handy: http://www.pagelines.com/store/plugins/icon-font-shortcode/ (I am the seller)

If it helps, great.

 

To answer your question specifically, I think you're running into issues with double and single quotes undesirably closing each other...

 

I tried it with scrollspy and I could get this to work (notice use of my shortcode plugin):

1. <div class="scroll-header" title='[i]icon-home[/i] Introduction'></div>

But oddly enough I couldn't get either of these to work (not using my icon font shortcode plugin):

2. <div class="scroll-header" title='<i class="icon-home"></i> Introduction'></div>
3. <div class="scroll-header" title="<i class='icon-home'></i> Introduction"></div>

 

Not sure why not but hopefully that points you in the right direction and you get your issue solved.

Share this post


Link to post
Share on other sites
Danny

Hi,

 

Unfortunately, Font Awesome code can not be used with the Scroll Spy section Title HTML. 


Please search our forums, before posting!

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

    • Jason
      By Jason+
      Any chance you can add anchors to the tabs shortcode (similar to ultimate shortcode plugin)?
      Just annoying having to use that plugin rather than pagelines one
       
      <h2>Tabs anchors</h2> [su_tabs] [su_tab title="Tab 1" anchor="First"] Tab 1 content [/su_tab] [su_tab title="Tab 2" anchor="Second"] Tab 2 content [/su_tab] [su_tab title="Tab 3" anchor="Third"] Tab 3 content [/su_tab] [/su_tabs] Use next links to switch this tabs <a href="#First">Open tab 1</a> | <a href="#Second">Open tab 2</a> | <a href="#Third">Open tab 3</a>  
    • Jason
      By Jason+
      Any solution to map section not rendering inside tab shortcode.
      (Map sits inside 3rd tab so map not visible on page load)
      Also this just seems to effect the map section. Map shortcode renders fine.
      I want to use the map section for finer control over markers and locations
      Renders fine if in first page.
       
      Thanks
    • bnapoli
      By bnapoli+
      On my site www.anewbeginning.com the "toggle" function mysteriously stopped working.  I have tried all browsers, tried disabling plugins, removing all the relevant CSS but still cant understand why it isn't working.
      The toggle is placed on this page: http://anewbeginning.com/?page_id=15965 and http://anewbeginning.com/?page_id=10779 but it does not display.
      On my other Platform5 websites, that exact code works fine: see here http://4aa.d11.myftpupload.com/?page_id=123
      Code is the same. Please help, thank you!
    • micstepl
      By micstepl+
      Pagelines seems to "disallow" the (a) usage and/or (display) of shortcodes.
      Specifically I need shortcodes in "description" of "tag/catagory" in order to display images/fontawsome, before a category.
      Please can you provide a fix for me to allow. 
    • mrhinsh
      By mrhinsh+
      Guys,
       The ProPricing plugin does not seam to render shortcodes.

       
      I am using WP-Types, and as you can see the shortcode is rendered in the "Elements" but not in the "ProPricing".
      Can we get a fix?
×