Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Monents and Font Awesome

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

how can I see a list of Moments Template supported icons form Font Awesome?

I try also with the classical format
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

and some icons are also not supported

Example

I try use a fa-money in a module and it´s show

But if I try fa-ge or fa-recycle its not appear.

And very bad is the icon, the right or the wrong are placed two times

I thing it´s not a good idea to use as module classe, maybe as <i> Tag

www.yoga-retreats.in/yoga-trekking/yoga-and-trekking-in-the-himalaya-bhrigu-lake-trek.html

Ricardo
  • ricardos's Avatar
  • ricardos
  • LIfetime Developer - Big Bamboo
  • 297 posts
  • Karma: 0
The administrator has disabled public write access.
Hi,

You are missing a class for the icons. You need to first use fa so
class="fa fa-ge"

regards

Rob
  • Robert Went's Avatar
  • Robert Went
  • Moderator
  • 2210 posts
  • 196 Thanks
  • Karma: 90
The administrator has disabled public write access.
Hallo Rob

This is the result
www.yoga-retreats.in/yoga-trekking/yoga-and-trekking-in-the-himalaya-bhrigu-lake-trek.html

regards
Ricardo
  • ricardos's Avatar
  • ricardos
  • LIfetime Developer - Big Bamboo
  • 297 posts
  • Karma: 0
The administrator has disabled public write access.
You need to adjust the padding of the module and position like you have with the other custom style

with the padding value you will need to make use of the suffix

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
now I use the class icon and my self styled class, she look like:
.retreaticon:before {
color: #fff;
content: url(../images/ico/yogi-white-medium.png);
display: block;
float: right;
right: 0;
position: relative;

but the padding make not difference, I will have the icon on the same proportion like the comment, but is not posible to style exactly the same. some Idea?
  • ricardos's Avatar
  • ricardos
  • LIfetime Developer - Big Bamboo
  • 297 posts
  • Karma: 0
The administrator has disabled public write access.
All sorted now?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
unffortunately not, I try to put the icon on yoga retreat latest news module something righer but ot sucessfull

Ricardo
  • ricardos's Avatar
  • ricardos
  • LIfetime Developer - Big Bamboo
  • 297 posts
  • Karma: 0
The administrator has disabled public write access.
This is what I see

ricardo-icon.jpg


This is from the Chrome browser
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
I see the same, look to yoga retreat module, the icon is on the bottom of the zen-module-title, if you compare with the inquire module you can see the difference.

Untill now is not for me clean how can I place the retreat-icon like the comments-icon.

Any Idea?

Now if you scroll down you the Tour Cost, there is also another problem.

Ricardo
  • ricardos's Avatar
  • ricardos
  • LIfetime Developer - Big Bamboo
  • 297 posts
  • Karma: 0
The administrator has disabled public write access.
You need to add a top value to the custom css for that icon

The height is different - think you will need a negative value

Cheers
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
hum, I tryed the same before and don´t work

top: -8px; and right -8px

but now is ready!

Thank you
Ricardo
  • ricardos's Avatar
  • ricardos
  • LIfetime Developer - Big Bamboo
  • 297 posts
  • Karma: 0
The administrator has disabled public write access.
You're welcome

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Try this with your custom css

#off-canvas-nav .t3-mainnav ul.nav.accordion > li .separator {float: none;font-family: open sans;}

this line already exists so add the font family bit to it

#off-canvas-nav .t3-mainnav ul.nav.accordion > li .separator:before {font-family:fontawesome}

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers