• 0

Font-awesome in Scrollspy?


Question

Posted · Report post

Is it possible to put Font-Awesome icons in a scrollspy menu?  I tried using the <i class="icon-name"></i> in the <h2> title attribute - which I suspected wouldn't work and of course it didn't.  I also tried using the unicodes on the Font-Awesome website and I couldn't get those to work either.    

 

Any suggestions?

 

Thanks,

 

Jerrad

Share this post


Link to post
Share on other sites

15 answers to this question

  • 0

Posted · Report post

The ScrollSpy menus title is taken from the title="" attribute, therefore adding Font Awesome to the ScrollSpy isn't possible with this method.

 

What you can do try is using CSS and the unicode for that icon in the CSS content property. For a list of Font Awesome icons unicodes see here - http://fortawesome.github.io/Font-Awesome/cheatsheet/
 

Here is an example of how to add an icon via CSS - http://stackoverflow.com/questions/14736496/use-font-awesome-icons-in-css

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Jerrad,

 

I used these http://docs.pagelines.com/tutorials/font-awesome

 

In a menu in Dashboard > Appearance > Menus in the label field for each menu item. I had no issues with it.   Thoes, by the way, are the ones tested to work in DMS. Others may not work.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ok - Thanks!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You're welcome.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Rob,

 

I've tried to achieve this in a scrollspy menu but didn't succeed. You mention Appearance/Menus but that's not where you create a scrollspy. Are you sure this is doable with a scrollspy too?

 

Thanks, Jan

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Jan, it should be.  However, I admit I have not tested it personally.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Rob, 

 

When I look at code like this:

<h2 class="scroll-header" title="bijvoorbeeld">Bijvoorbeeld</h2>

I can't figure out where I could place e.g. a piece of code like this:

<i class="icon-coffee"></i>

Because it has to be included in the 'title'.

Maybe you can lend your mind again.

 

Thanks, Jan

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@Jan - that's what I was thinking too.  I haven't had a chance to get back to looking at this until today and saw you jumped in.  Thanks for continuing the conversation.

 

I'm wondering if there's a way to make this work using a hook?  I'm not an expert in this arena so I definitely need help if that's the solution.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

When you add the word Bijvoorbeeld  it should be in a label field.

 

In the label field, add <i class="icon-coffee"></i> Bijvoorbeeld and you should see the text, in h2, with the fontawesome coffee cup icon in front of the word.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Rob,

 

for the sake of testing a temporary page.

http://www.lovo.nu/scrollspy-test

 

In the first h2 I've tried to follow your tip with the folowing code.

<h2 class="scroll-header" title="example"><i class="icon-coffee"></i>Example</h2>

This resulted in a icon before the h2 but not i the spynav.

This seems logical to me because it should be in 'title'. But if I do that it goes wrong of course. Tag in an text string.

 

Second is just a regular. But can serve for testing new ideas.

 

Thanks, Jan

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Danny,

 

Thanks will try that out.

 

Jan

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

evscicats"], @[member="janpeeters

 

just released vertical scrolling menu in Pagelines Store witch has this ability. Scroll Nav DMS

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

bestrag, thanks for letting me know. it looks highly configurable so that's nice. I'll consider buying it. 

One question though. Is it responsive. How would elements on a page behave when diminishing the width of a scroll nav? E.g. like a spynav menu?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

janpeeters

thanks for the interest.

templates for media bellow 768px will be implemented next week.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for letting me know, I'll have a look by that time on your demo site to see how it works. Thanks again!

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