Jump to content

Adding Icon Font to Scrollspy

Recommended Posts


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

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



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

    • jeomiland
      By jeomiland+
      Am following a couple of tutorials about making custom shortcodes and making them available in your site. They recommend to make a "my_custom_shortcode.php" file in wp-content folder so it survives Core wordpress and Theme updates. However, they then say to place a couple lines of code in the theme functions.php file. The one in pl-framework theme folder does not look like the best place to put that code and I can't see a shortcodes.php file in the theme.
      So where is the best place and way to add custom shortcodes to a Pl5 project?
      john erik
    • 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.
    • 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.