Archived

This topic is now archived and is closed to further replies.

  • 0

Adding Icon Font to Scrollspy


Question

Posted · Report post

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

3 answers to this question

Posted · Report post

Hi,

 

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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