replace johns-icons with FontAwesome in module title ?

Hi,
I find johns-icons really poor - only 5 or 6 different icons - when FontAwesome have much more different icons
I'd like to change some fonts I won't use with the template.
For example, icon-pencil (johns-icons) would be changed with fa-truck (FontAwesome)
in module called "My[icon-pencil][br]Cozy[br]Blog "

using Firebug, I can virtually do it but no way to do it possible in fact.
with Firebug, I can set

Code: Select all

<span>My<i class="fa fa-truck"></i></span><span>Cozy</span><span>Blog</span>

with [class^="gk-icon-"]::before, [class*=" gk-icon-"]::before { in gk-stuff.css using FontAwesome and not johns-icons

How can I have the same result ?
I tried to modify title of the module into "My[fa-truck][br]Cozy[br]Blog" but this is not the solution.

Thanks

Hi

Can You show me a page where You've tried "My[fa-truck][br]Cozy[br]Blog" ?? This may not show anything now, but it can be a way to go.

Hi Teitbite
see http://www.cgigraphicdemo.fr/granie
Part Bottom3 called "Le transport du bois"
in firebug at <div id="gkBottom3" class="gkSingleModule">
edit :

Code: Select all

<h3 class="header scroll-revealed" data-scroll-reveal="enter right and move 50px over 0.45s" style="font-size:45px !important; line-height: 1.4;" data-scroll-reveal-initialized="true" data-scroll-reveal-complete="true">
Le
<i class="fa fa-truck"></i>
<br>
transport
<br>
du bois
</h3>

In CSS :

Code: Select all

.box.title-right .header {
    font-family: fontawesome;

I can't change the module title using <i class="fa fa-truck"></i> - not recognized

Hi

It does not look like described. Please send me an access to joomla panel so I'll set this title by myself.

Hi

I was able to make it. I added this to module title "[icon-truck]" and this code to override (copied from font awsome page):

Code: Select all

.gk-icon-truck::before {
    content: "\f0d1";
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-family: FontAwesome !important;
    font-feature-settings: normal;
    font-kerning: auto;
    font-language-override: normal;
    font-size: inherit;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-synthesis: weight style;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    text-rendering: auto;
    transform: translate(0px, 0px);
}


That's so cooool !!!
Thanks a lot for that tip. It can be easily reproduced for others Fontawesome icons if needed.

Sorry but I loose the arrows in the "My Cozy Blog" module (this title is changed on my website) when displayed on mobile.
How did you manage to create content which is displayed through these arrows ?
I added a closing div and an opening div (</div><div>) in my content code to add a slide content but maybe that's not the way ?
Thanks

Hi

I cannot see "My Cozy Blog" anywhere. So I do not know what You mean. Can You please show me and tell me something more about the problem ?

Oups, right. better with the name of the module
it is called "le[icon-flame][br]bois de chauffage " position Bottom4 on my website
Thanks

Hi

Add this code to override.css and make sure override is enabled in template settings:

Code: Select all

@media only screen and (max-width:1140px) {
.gkTeam {
    margin: 50px auto 0;
    top: 0;
    width: 80%;
}

.gkTeamNext {
    right: 30px;
}

.gkTeamPrev {
    left: 30px;
}
}

@media only screen and (max-width:1040px) {
.gkTeam {
    margin: 0 auto;
    top: 30px;
}
}

@media only screen and (max-width:767px) {
.gkTeam[data-cols="4"] figure {
    margin-bottom: 50px;
    width: 50%;
}
}

@media only screen and (max-width:600px) {
.gkTeamNext {
    right: -30px;
}

.gkTeamPrev {
    left: -30px;
}

.gkTeam[data-cols="3"] figure,
.gkTeam[data-cols="4"] figure,
.gkTeam[data-cols="5"] figure {
    width: 100%;
}

.gkTeam[data-pages="4"] > div {
    width: 100%;
}
}