Elxis CMS Forum

Support => General => Topic started by: chongbing on April 30, 2015, 20:13:33

Title: How to use "Font Awesome" in Elxis 4.x?
Post by: chongbing on April 30, 2015, 20:13:33
Hi there,

Does anyone know If I want to use the "Font Awesome" in Elxis 4.x ? ref, http://fortawesome.github.io/Font-Awesome/get-started/

How to load files (CSS/JS) in Elxis page ?
Because font-awesome.min.css should be referenced in the <head> of webpage(html/php)

Thanks a lot.
Title: Re: How to use "Font Awesome" in Elxis 4.x?
Post by: datahell on May 01, 2015, 14:04:56
You should do so in your template's index.php file.
The code to add a style-sheet file in <head> section is this:

$eDoc->addStyleLink('http://www.example.com/css/anyfile.css');

If $eDoc is not previously declared do that first:
$eDoc = eFactory::getDocument();

Documentation for Elxis Document library (https://www.elxis.net/docs/developers/libraries/elxisdocument.html)
Title: Re: How to use "Font Awesome" in Elxis 4.x?
Post by: chongbing on May 01, 2015, 16:58:42
Hi datahell,

I’ve added a style-sheet file in <head> section as you said but it not worked.
Could you kindly check that ?

URL at http://filemaker.bz/en/filemakergo/test-font-awesome.html

Thanks a lot.
Title: Re: How to use "Font Awesome" in Elxis 4.x?
Post by: datahell on May 01, 2015, 17:16:27
The CSS style has been loaded fine but you don't use it correctly. You have to insert some elements and apply to them the css classes you want to display.
Title: Re: How to use "Font Awesome" in Elxis 4.x?
Post by: chongbing on May 01, 2015, 17:59:32
Thank datahell for quick reply.

Yes, I just wrote a some elements and “fortawesome” classes via CKEditor as below
but the some css codes will be cleared in CKEditor after i click save or apply buttom.

Do you know why the some css codes will be cleared ?  Thanks again.


Code: [Select]
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
Title: Re: How to use "Font Awesome" in Elxis 4.x?
Post by: datahell on May 01, 2015, 20:11:52
No css class is been cleared by the editor. What may be cleared is some old fashioned html tags.
Title: Re: How to use "Font Awesome" in Elxis 4.x?
Post by: chongbing on May 01, 2015, 20:55:07
Could you give me some advice ? if I want to use more "Web font" like in your Elxis 4.x ?  Thanks datahell
Title: Re: How to use "Font Awesome" in Elxis 4.x?
Post by: datahell on May 02, 2015, 20:42:14
I don't know what you want to do and I don't see why you must use this "awesome" font. With standard CSS you can do anything, you don't need such external frameworks. If you want to display some graphical signs next to your text (like cars, phone, etc) you can use a sprite image. CSS is simple: you declare a rule in your stylesheet file and you use it in HTML code. Be careful for CSS overwrites and browser compatibility!
Title: Re: How to use "Font Awesome" in Elxis 4.x?
Post by: chongbing on May 03, 2015, 10:22:37
For the end users, clicking "awesome font" from the editor shall be easier and help prevent errors in editing. As below image, the preset boomstrap is available to select. It's a great thing !

http://forum.j2eemx.com/files/images/ScreenShotEditor.png
Title: Re: How to use "Font Awesome" in Elxis 4.x?
Post by: chongbing on May 04, 2015, 15:01:37
Hope this feature can be added to the next release, If possible :)
---
Is possible add the "Font Awesome" in CKEditor for user to pick ?

Please see the demo(font-awesome in CKEditor)
http://michaeljanea.byethost7.com/ckeditor/font-awesome