Joomla Templates Club 406,261 posts

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#968862

The ‘Images’ are icons from Font Awesome (http://fontawesome.io/icons/). Each button links to an article and the icon for the button is specified in the article’s JA Extra Fields tab.

---

Attachments:

1. 

[cknowlan Friend cknowlanJoin date: July 2016Posts: 52Downloads:21Uploads:10 Thanks: 9]

#968922

I go in and change the icon but nothing changes when I display the page. I put a icon from font awesome to change the coding icon to a cloud Icon (fa-cloud instead of fa-code) but nothing changes I put a screen shot of the module I am working on.

---

Attachments:

1. 

[pagefactory Friend pagefactoryJoin date: March 2012Posts: 102Downloads:20Uploads:11 Thanks: 1 Thanked: 3 times in 1 posts]

#968940

timtecsa

There must something wrong, I have a problem as well with this module.

my url: http://www.roboostveen.nl just make the install, joomla 3.

I only changed Read more into Lees meer (dutch) in the code of the module
code now:
<div class="ja-special-content">
<div class="circle-icon background-1">

Web design

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incid dunt ut labore et dolore magna aliqua.

<a class="btn btn-link" href="index.php?option=com_content&view=article&id=148&catid=84&Itemid=566">Lees meer

after the change the icon was gone (?)

After this I open the coding module just open the source , do nothing, close the module and the icon was gone also (?)
Code (still)now :
<div class="ja-special-content">
<div class="circle-icon background-3">

Coding

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

<a class="btn btn-link" href="index.php?option=com_content&view=article&id=132&catid=84&Itemid=562">Read more

For the rest did’nt change something else , not in the menu services not in the articles

I use firefox as browser.

Do you see any problems ?

reagards Rob – PageFactory –

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#968951

Sorry for the incorrect info when using the Services custom html module. I have been using the Carousel Articles category module on this site http://www.compose.com.hk where you can see lots of small buttons with fa icons in them. These you do edit as I have described.

But the Services module is Custom HTMl type and in 3 positions. Namely positions 1,2 and 3. If you look at the front end with Inspect Element you’ll see an odd item in the CSS called Pseudo::before element (see attached image below). In this piece of CSS you’ll also see: content: "f0c2";

Pseudo ::before element
.fa-cloud:before {
 content: "\f0c2"; 
}

Now look at the 2nd attached image which shows the Cloud icon entry in Font Awesome. You may notice the reference to Unicode: f0c2

Changing the Unicode reference for the icon you want to place in the button does the trick.

Good luck

Tim

PS. See aso https://www.joomlart.com/documentation/joomla-templates/ja-nuevo-template/joomla-extension-configuration#custom-html – Section 5

---

Attachments:

1. 
2. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#969286

Hi guys,

These are Custom HTML module so before changing the content, try going to Global Configuration and turn off the Default Editor first (as the editor often strips some HTML tags when saving so it may cause issue)

Then you go to Extensions > Modules > Filter modules in position-1, position-2, position-3. Open module in each of these positions and change the class for FontAwesome icons. Below is list of content of these modules as in our demo site:

Web Design – position-1:

<div class=&quot;ja-special-content&quot;>
<div class=&quot;circle-icon background-1&quot;><i class=&quot;fa fa-desktop&quot;></i></div></p>
<h4><a href="index.php?option=com_content&view=article&id=148&catid=84&Itemid=566">Web design</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incid dunt ut labore et dolore magna aliqua.</p>
<p><a class=&quot;btn btn-link&quot; href=&quot;index.php?option=com_content&view=article&id=148&catid=84&Itemid=566&quot;>Read more</a>
</div>

Security Proofed – position-2

<div class=&quot;ja-special-content&quot;>
<div class=&quot;circle-icon background-2&quot;><i class=&quot;fa fa-cloud&quot;></i> </div></p>
<h4><a href="index.php?option=com_content&view=article&id=130&catid=84&Itemid=565">Cloud Solutions</a></h4>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have many suffered alteration in some form.</p>
<p><a class=&quot;btn btn-link&quot; href=&quot;index.php?option=com_content&view=article&id=130&catid=84&Itemid=565&quot;>Read more</a>
</div>

Coding – position-3

<div class=&quot;ja-special-content&quot;>
<div class=&quot;circle-icon background-3&quot;><i class=&quot;fa fa-code&quot;></i></div></p>
<h4><a href="index.php?option=com_content&view=article&id=132&catid=84&Itemid=562">Coding</a></h4>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<p><a class=&quot;btn btn-link&quot; href=&quot;index.php?option=com_content&view=article&id=132&catid=84&Itemid=562&quot;>Read more</a>
</div>

then change classes: fa-desktop, fa-cloud, fa-code with your desired icons (check out list of FA icons here: http://fontawesome.io/icons/ )

1 user says Thank You to Saguaros for this useful post

1. timtecsa

[cknowlan Friend cknowlanJoin date: July 2016Posts: 52Downloads:21Uploads:10 Thanks: 9]

#969459

Bravo! Solved!

[Author]

Posts