Using an icon font for arrows in slider (trying to)

[f7brian]

Hello,

Here is the latest dilemma to my current site redesign.

I am using the woo themes responsive slider called flexslider.
The site that I’m looking at for reference (simplified in this link)
http://f7digitaldesign.com/goal/
Shows nice arrows for previous and next at the browser edges.
I am trying for that but can’t see what my copy of that site is missing (CSS, or proper link to the font files?)
These two next links show the site page I’ve been building, both don’t have the icon font working BUT the second one also shows annoying alt text popping up instead. At least the first one just has nothing.
http://www.f7digitaldesign.com/working2a/
http://www.f7digitaldesign.com/working2b/
Anyway, I need help seeing where I’m not calling on that icon font file correctly.

Any help on this issue is greatly appreciated!

[Alexander Belov]

Hey!
As far as I understood, originally the arrows were inserted via Pseudo-element :before, but you used none in your code.

[f7brian]

Thanks for the reply! I’m not that familiar w/ pseudo elements. I did try to make sure I have that in my site. I’ve added the classes to my CSS file and (tried) to make sure the file path to the fonts is right, still no success.

One thing that seems to be at play is that there is html being generated by a script somehow…I see it in the DOM, via Firebug, but it is not in my html page. The html that is generated seems to call on classes that may have to do w/ the arrows.

I’ve got those classes in my CSS, but doesn’t seem to matter.

Any more help on this, as always, is much appreciated.

Thanks!

[GSutherland]

there’s a lot to wade through on that page, and it’s difficult to poke around in. if you make a reduced test case in codepen it’d be much easier to figure out the problem.

you probably just need to add something along the lines of

i.icon-angle-left, i.icon-angle-right {
font-family: fontawesome;
}

i.icon-angle-left::before {
content: ‘\f104’;
}

i.icon-angle-right::after {
content: ‘\f105’;
}

[Author]

Posts