Font Awesome usage in Elxis 4.5

[nikos]

Font Awesome usage in Elxis 4.5

Looking at the article FontAwesome and Elxis CMS below I place some examples how you can use font awesome in Elxis 4.5 Typhon with template flex as is shown at the image here 

1. Open with an editor like PSPad the index.php file of flex template and at the top after line $elxis = eFactory::getElxis(); add the following 2 lines and save it.

$eDoc->addFontAwesome();
$eDoc->addFontAwesomeAnim();

Example 1: If you want to display font awesome icons on Horizontal menu items, then open into folder css the template.css file and at the end add the following lines

Code: [Select]


/* HORIZONTAL TOP MENU */

/* 1st level menu items */
ul.elx_menu > li:nth-child(1) a::before {
    display:inline-block; margin-right:5px;
    font-family: FontAwesome; content: '\f015';
}
ul.elx_menu > li:nth-child(2) a::before {
    display:inline-block; margin-right:5px;
    font-family: FontAwesome; content: '\f1ea';
}
ul.elx_menu > li:nth-child(3) a::before {
    display:inline-block; margin-right:5px;
    font-family: FontAwesome; content: '\f26c';
}
ul.elx_menu > li:nth-child(4) a::before {
    display:inline-block; margin-right:5px;
    font-family: FontAwesome; content: '\f0e0';
}
ul.elx_menu > li:nth-child(5) a::before {
    display:inline-block; margin-right:5px;
    font-family: FontAwesome; content: '\f211';
}
ul.elx_menu > li:nth-child(6) a::before {
    display:inline-block; margin-right:5px;
    font-family: FontAwesome; content: '\f0e8';
}

/* 2nd level (children) menu items */
ul.elx_menu > li:nth-child(3) > ul > li:nth-child(1) a::before {
    display:inline-block; margin-right:5px;
    font-family: FontAwesome; content: '\f03e';
}
ul.elx_menu > li:nth-child(3) > ul > li:nth-child(2) a::before {
    display:inline-block; margin-right:5px;
    font-family: FontAwesome; content: '\f008';
}
ul.elx_menu > li:nth-child(3) > ul > li:nth-child(3) a::before {
    display:inline-block; margin-right:5px;
    font-family: FontAwesome; content: '\f026';
}


Example 2: If you want to display font awesome icons on Vertical menu items, then open into folder css the template.css file and at the end add the following lines

Code: [Select]


/* VERTICAL MENU */

/* 1st level menu items */
.elx_vmenu li:nth-child(1) a::before {
    display:inline-block; margin-right:5px;
    font-family: FontAwesome; content: '\f015';
}
.elx_vmenu li:nth-child(2) a::before {
    display:inline-block; margin-right:5px;
    font-family: FontAwesome; content: '\f1ea';
}
.elx_vmenu li:nth-child(3) a::before {
    display:inline-block; margin-right:5px;
    font-family: FontAwesome; content: '\f26c';
}
.elx_vmenu li:nth-child(4) a::before {
    display:inline-block; margin-right:5px;
    font-family: FontAwesome; content: '\f0e0';
}
.elx_vmenu li:nth-child(5) a::before {
    display:inline-block; margin-right:5px;
    font-family: FontAwesome; content: '\f211';
}
.elx_vmenu li:nth-child(6) a::before {
    display:inline-block; margin-right:5px;
    font-family: FontAwesome; content: '\f0e8';
}
/* 2nd level (children) menu items */
.elx_vmenu li:nth-child(3) > ul > li:nth-child(1) a::before {
    display:inline-block; margin-right:5px;
    font-family: FontAwesome; content: '\f03e';
}
.elx_vmenu li:nth-child(3) > ul > li:nth-child(2) a::before {
    display:inline-block; margin-right:5px;
    font-family: FontAwesome; content: '\f008';
}
.elx_vmenu li:nth-child(3) > ul > li:nth-child(3) a::before {
    display:inline-block; margin-right:5px;
    font-family: FontAwesome; content: '\f026';
}



Example 3: If you don't want to display font awesome icons on Horizontal Footer menu items (because it takes the properties from top horizontal menu), then add the following lines into template.css file

Code: [Select]


/* FOOTER MENU*/
.flex_footer_menu ul.elx_menu > li:nth-child(1) a::before {
    display:none;
}
.flex_footer_menu ul.elx_menu > li:nth-child(2) a::before {
    display:none;
}
.flex_footer_menu ul.elx_menu > li:nth-child(3) a::before {
    display:none;
}



Example 4: If you want to display the newspaper icon on title of module Articles then place at CSS Suffix field of Articles Module the _fanews and into template.css file add the following lines

Code: [Select]


div.elx_short_box h3:before { display:none; }
.module_fanews h3:before { display: inline-block; font-family: FontAwesome; content:"\f1ea"; padding-right:5px; }


Example 5: If you want to display the list icon on title of module Menu then place at CSS Suffix field of module Menu the _falist and into template.css file add the following line

Code: [Select]


.module_falist h3:before { display: inline-block; font-family: FontAwesome; content:"\f0cb"; padding-right:5px; }


Example 6: If you want to display the user icon on title of module Who is online then place at CSS Suffix field of module Who is online the _fauser and into template.css file add the following line

Code: [Select]


.module_fauser h3:before { display: inline-block; font-family: FontAwesome; content:"\f007"; padding-right:5px; }


Example 7: Add the following line into css

.ired { font-family: FontAwesome; color:red; font-size: 25px; float: left; padding-right: 5px; }

Example 8: Add the following line into css

.fadownload:before { display: inline-block; font-family: FontAwesome; content:"\f019"; font-size: 20px; float: left; padding-right:5px; }

Examples 7 and 8 can be applied in any text of an article or custom module. On the image of the example are displayed at the top under the horizontal menu

Here is the code

Code: [Select]


<p class="elx_info" style="margin: 30px 0px; text-align: justify;"><strong><span class="ired">Elxis CMS</span></strong> is a free, open source, content management system. Among others Elxis is famous for its multilingual features, the strong security, the easy to use interface, the adaptation of the modest web technologies and the quality of the source code and extensions.</p>

<p class="elx_textblock" style="margin: 30px 0px; text-align: justify;"><a class="fadownload" href="https://www.elxis.org" title="Elxis open source cms"><strong>Download Elxis CMS</strong></a> from elxis.org and give it a try. If you want a modern and secure website then Elxis is the best choice.</p>



[datahell]

A fix on the above text.

The integration of font Awesome in Elxis requires just this:
$eDoc->addFontAwesome();
OR this if you need animated icons:
$eDoc->addFontAwesomeAnim();
NOT BOTH.

Nice post Nikos!

[perseas]

Change graphical icons in Awesome font

Hello Elxis Team

I want to replace all graphics icons fonts (like: images/icons/rss.png).
Fonts are normally loaded in the Tempate. (Added this line for loading fonts: $eDoc->addFontAwesome()
I have no problem with the .css file changes.
I'd like your help on code changes to the class file (ares.class.php)

Like

Code: [Select]

echo '<img src="'.$this->url.'images/find-17px.png" style="width: 25px; height: 25px;" class="image_search" alt="'.eFactory::getLang()->get('SEARCH').'" />';

------------------------------
* @version      ares.class.php 2016-08-29 14:32:54Z webgiftgr $
* @package      Elxis CMS 4.5
* @subpackage   Template / Ares
* @author      webgift dev ( http://www.webgift.dev )
* @copyright   (c) 2007-2013 Webgift web services (http://www.webgift.dev). All rights reserved.
* @license      Commercial
-------------------------------

Thanks in advance

[nikos]

Ares is a commercial template created by webgift. So only webgift can answer your question.

[perseas]

Of course maybe do some upgrading on this point.

[webgift]

Answered in private.
Please don't share part of source code for software that has been released under commercial
license.

Thank you!

[perseas]

@webgift
I'm Sorry.

[xmanhattan]

Thank you Nikos. 

[nikos]

You are welcome xmanhattan

You can style it even more if you like. Look at the examples below which are displayed here and here

Articles tagged as

.elx_tags_page h2:before { display: inline-block; font-family: FontAwesome; content:"\f02b"; padding-right:5px; }

Article date

div.elx_dateauthor:before { display: inline-block; font-family: FontAwesome; content:"\f274"; padding-right:5px; }

It has been read

div.elx_hits_box:before { display: inline-block; font-family: FontAwesome; content:"\f201"; padding-right:5px; }

Tags

div.elx_tags_box:before { display: inline-block; font-family: FontAwesome; content:"\f02c"; padding-right:5px; }

Read also

h3.elx_links_box_title:before { display: inline-block; font-family: FontAwesome; content:"\f01a"; padding-right:5px; }

Links of articles under Read also

.elx_links_box li a:before { display: inline-block; font-family: FontAwesome; content:"\f046"; padding-right:5px; }

Arrow for Previous article

.elx_chain_previous .elx_chain_title:before { display: inline-block; font-family: FontAwesome; content:"\f0a8"; color: #169FCC; padding-right:5px; }

Arrow for Next article

.elx_chain_next .elx_chain_title:before { display: inline-block; font-family: FontAwesome; content:"\f0a9"; color: #169FCC; padding-right:5px; }

You cat display also the icon to the right (after) of the word or phrase

Example: .elx_links_box li a:after { display: inline-block; font-family: FontAwesome; content:"\f046"; padding-left:5px; }

[datahell]

Just a note: FontAwesome in Elxis 4.5 updated to version 4.7. This means that new icons are supported.
Required Elxis version: 4.5 rev1909 or newer.