Jump to content


Photo
- - - - -

Font-awesome in Scrollspy?

font-awesome scrollspy

Best Answer Danny , 06 September 2013 - 11:55 AM

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.g...ome/cheatsheet/
 

Here is an example of how to add an icon via CSS - http://stackoverflow...me-icons-in-css

Go to the full post


  • Please log in to reply
15 replies to this topic

#1 evscicats

evscicats

    Advanced Member

  • Members

  • 82 posts
  • LocationEvansville, IN, USA
  • Framework Version:DMS 2.1.7
  • Country: Country Flag

Posted 30 August 2013 - 03:11 PM

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



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 31 August 2013 - 05:35 AM

Jerrad,

 

I used these http://docs.pageline...ls/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.



#3 evscicats

evscicats

    Advanced Member

  • Members

  • 82 posts
  • LocationEvansville, IN, USA
  • Framework Version:DMS 2.1.7
  • Country: Country Flag

Posted 03 September 2013 - 04:41 AM

Ok - Thanks!



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 03 September 2013 - 09:17 PM

You're welcome.



#5 janpeeters

janpeeters

    Advocate

  • Members

  • 307 posts
  • LocationBreda, The Netherlands
  • Country: Country Flag

Posted 04 September 2013 - 03:14 PM

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



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 05 September 2013 - 04:32 AM

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



#7 janpeeters

janpeeters

    Advocate

  • Members

  • 307 posts
  • LocationBreda, The Netherlands
  • Country: Country Flag

Posted 05 September 2013 - 03:29 PM

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



#8 evscicats

evscicats

    Advanced Member

  • Members

  • 82 posts
  • LocationEvansville, IN, USA
  • Framework Version:DMS 2.1.7
  • Country: Country Flag

Posted 05 September 2013 - 03:44 PM

@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.



#9 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 05 September 2013 - 09:39 PM

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.



#10 janpeeters

janpeeters

    Advocate

  • Members

  • 307 posts
  • LocationBreda, The Netherlands
  • Country: Country Flag

Posted 06 September 2013 - 08:39 AM

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



#11 Danny

Danny

    Is Awesome!

  • Moderators
  • 16954 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 06 September 2013 - 11:55 AM   Best Answer

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.g...ome/cheatsheet/
 

Here is an example of how to add an icon via CSS - http://stackoverflow...me-icons-in-css



#12 janpeeters

janpeeters

    Advocate

  • Members

  • 307 posts
  • LocationBreda, The Netherlands
  • Country: Country Flag

Posted 06 September 2013 - 02:46 PM

Hi Danny,

 

Thanks will try that out.

 

Jan



#13 bestrag

bestrag

    Super Member

  • Members

  • 243 posts
  • Country: Country Flag

Posted 25 October 2013 - 08:59 PM

@evscicats, @janpeeters

 

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



#14 janpeeters

janpeeters

    Advocate

  • Members

  • 307 posts
  • LocationBreda, The Netherlands
  • Country: Country Flag

Posted 25 October 2013 - 09:24 PM

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



#15 bestrag

bestrag

    Super Member

  • Members

  • 243 posts
  • Country: Country Flag

Posted 26 October 2013 - 06:36 PM

@janpeeters

thanks for the interest.

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



#16 janpeeters

janpeeters

    Advocate

  • Members

  • 307 posts
  • LocationBreda, The Netherlands
  • Country: Country Flag

Posted 26 October 2013 - 08:07 PM

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







Also tagged with one or more of these keywords: font-awesome, scrollspy