Elxis CMS Forum
Extensions => Templates => Topic started by: nikos on January 18, 2017, 22:30:35
-
Font Awesome usage in Elxis 4.5
Looking at the article FontAwesome and Elxis CMS (https://www.elxis.org/blog/fontawesome-and-elxis-cms.html) 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 (http://www.osw.gr/media/images/awesome/elxis45_awesome.png)
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
/* 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
/* 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
/* 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 (http://fontawesome.io/icon/newspaper-o/) 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
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 (http://fontawesome.io/icon/list-ol/) 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
.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 (http://fontawesome.io/icon/user/) 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
.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
<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>
-
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!
-
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
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 (http://www.webgift.dev) )
* @copyright (c) 2007-2013 Webgift web services (http://www.webgift.dev (http://www.webgift.dev)). All rights reserved.
* @license Commercial
-------------------------------
Thanks in advance
-
Ares (https://www.elxis.net/edc/templates/46.html) is a commercial template created by webgift. So only webgift can answer your question.
-
Of course maybe do some upgrading on this point.
-
Answered in private.
Please don't share part of source code for software that has been released under commercial
license.
Thank you!
-
@webgift
I'm Sorry.
-
Thank you Nikos. ;D
-
You are welcome xmanhattan
You can style it even more if you like. Look at the examples below which are displayed here (http://www.osw.gr/media/images/awesome/elxis45_awesome1.png) and here (http://www.osw.gr/media/images/awesome/elxis45_awesome2.png)
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; }
-
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.