Jump to content

Archived

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

evscicats

Font-awesome in Scrollspy?

Recommended Posts

evscicats    14
evscicats

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
evscicats    14
evscicats

Ok - Thanks!

Share this post


Link to post
Share on other sites
Rob    547
Rob

You're welcome.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
janpeeters+    31
janpeeters

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
Rob    547
Rob

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
janpeeters+    31
janpeeters

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
evscicats    14
evscicats

@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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
janpeeters+    31
janpeeters

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

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters+    31
janpeeters

Hi Danny,

 

Thanks will try that out.

 

Jan

Share this post


Link to post
Share on other sites
bestrag    22
bestrag

evscicats"], @[member="janpeeters

 

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


bestrag.net

professional dms plugins 

 

Share this post


Link to post
Share on other sites
janpeeters+    31
janpeeters

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
bestrag    22
bestrag

janpeeters

thanks for the interest.

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


bestrag.net

professional dms plugins 

 

Share this post


Link to post
Share on other sites
janpeeters+    31
janpeeters

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

  • Similar Content

    • Buishi
      By Buishi
      Hi there,
       
      I'm having the following problem: I set up a scroll spy on my homepage, and put several sections throughout the homepage with .scroll-headers (for example: <h4 class="scroll-header" title="Testimonials">Testimonials</h4>). The problem is, the menu highlighting doesn't change as I scroll, only the last menu item remains highlighted. Any idea what's going on? See here:
       
      http://designmancan.com/CLL/
    • Phillip Crum
      By Phillip Crum
      Okay, that's all the f-words I could think of that made sense together...well, almost. Anyway, the font-awesome fonts I select from the drop-down in the Lists module aren't showing up. They did at one time but, alas, now they are gone. I get this now --->  [  ]. Interesting but.....no.
       
      License is activated, I appear to have the latest version of the theme, I helped an old lady today...I think I covered all the bases but..???
       
      Anybody have any thoughts? (About the missing icons, not the old lady...)
       
       
    • Buishi
      By Buishi
      I could have sworn I read in the documentation somewhere about creating a scroll-spy link using HTML (something like <a href="somesection" rel="scroll-spy" class="btn">button</a>), but I can't find it where I expected to. Is this possible? Basically, I want to use scroll spy from the main menu, instead of a separate scrollspy section. Possible, or do I need a different plugin?
    • seatangltd
      By seatangltd
      Hi,
       
      I'm having an issue with the scrollspy section. When I click on one of the buttons, it brings me down to the relevant content, but in the middle of the header text (which contains the scrollspy tags) as shown: http://grab.by/wNri
       
      The page should scroll down to just above the header text something like this: http://grab.by/wNta
       
      I know that scrollspy isn't meant for use with sections, but I tested it with content inside a single text box and had the same issue.
       
      http://cavistons.com/food-emporium/cheese/
       
       
    • ketri
      By ketri
      Hello

      If I understand http://docs.pagelines.com/tutorials/using-scrollspy this correctly, then I'm supposed to implement the scrollspy-navigation section to a page, and then write the page content in the WordPress admin-panel, and to the content of the site create sections for the scroll spy like:
       
      <h4 class="scroll-header" title="Setup"></h4> <p>Your content here</p>  
      Or possibly use a text box -section where I can write scrollspy-compatible html myself.

      As I can set the css-classes needed for scrollspy to my DMS sections easily, is it possible to also add the title so I could just drag & drop a landing page that scrolls to different sections? so I could use the scrollspy to scroll to i.e. specific section in my page like Column that has content inside it, or scroll to a fullwidth slideshow etc?

      Thank you


       
×