Jump to content

Adding Icon Font to Scrollspy

Recommended Posts

waltersrs    1

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>
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?

Share this post

Link to post
Share on other sites
catrina    103

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

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    1,327



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

    • 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
       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?
    • micstepl
      By micstepl+
      @Simon I do have an urgent request for a client Projekt. After migrating (before it worked) my site to anpother Server I get problems will all ShortCode Sections.
      See this Problem here: http://www.baumeister-scheidl.at/map-try
      thanks in advance!
      Maybe ist a User (MY) fault.
    • globalnative
      By globalnative+
      Hi everyone
      I used to love the Pagelines DMS shortcodes for creating tabs and accordians. 
      It doesn't seem to work in this version of pagelines 5?
      Is there another way to get that functional?
      Thank you kindly