Font Awesome usage in Elxis 4.5

Extensions > Templates

(1/2) > >>

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: ---
/* 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';
}

--- End code ---

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: ---
/* 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';
}

--- End code ---

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: ---
/* 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;
}

--- End code ---

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: ---
div.elx_short_box h3:before { display:none; }
.module_fanews h3:before { display: inline-block; font-family: FontAwesome; content:"\f1ea"; padding-right:5px; }

--- End code ---

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: ---
.module_falist h3:before { display: inline-block; font-family: FontAwesome; content:"\f0cb"; padding-right:5px; }

--- End code ---

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: ---
.module_fauser h3:before { display: inline-block; font-family: FontAwesome; content:"\f007"; padding-right:5px; }

--- End code ---

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: ---
Elxis CMS 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.

<a class="fadownload" href="https://www.elxis.org" title="Elxis open source cms">Download Elxis CMS</a> from elxis.org and give it a try. If you want a modern and secure website then Elxis is the best choice.

--- End code ---

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

------------------------------
* @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.

Navigation

[0] Message Index

[#] Next page

Go to full version