Outline Image-Fontawesome-Change icon

I would like to change the fontawesome icon used for a particular module.  What file needs to be changed in order for Boonex Outline to pull the new fontawesome icon that is listed as an icon used by Boonex in the icon.css. The "Location" that is presently used is not a supported fontawesome icon, therefore a empty circle is above the Outline post.

Vunderba..... Challenge Yourself to be the Best...... Hosting from Zarconia.net
Quote · 18 Sep 2013

Create icons.css in your custom template's CSS directory (or /templates/tmpl_uni/css for the default template) and add the following:

 

@import url("../../base/css/icons.css");

 

.sys-icon.location:before                { content: "\f0ac"; }

 

This makes the "location" class use the globe icon.  Look at the content values in /templates/base/css/icons.css for more examples.  If the developer used some other class name (e.g., "location-icon"), make the necessary changes.

BoonEx Certified Host: Zarconia.net - Fully Supported Shared and Dedicated for Dolphin
Quote · 18 Sep 2013

TY Nathan will try this solution and post results

Vunderba..... Challenge Yourself to be the Best...... Hosting from Zarconia.net
Quote · 18 Sep 2013

Forgot to mention, you may need to clear the CSS cache for the changes to take effect.

BoonEx Certified Host: Zarconia.net - Fully Supported Shared and Dedicated for Dolphin
Quote · 18 Sep 2013

That would be affirmative. Placed the code in custom template and Globe appeared after clearing cache. I believe I should add it to the Uni as a base for other templates to use also.

Vunderba..... Challenge Yourself to be the Best...... Hosting from Zarconia.net
Quote · 18 Sep 2013

There have been discussions that @import should not be used.  For one, it adds a layer to the upkeep of style sheets.  More importantly, it adds delays in the loading of style sheets.

A bit of history of @import.

The "@import" rule was introduced due to Netscape Navigator 4.x

As Netscape at the time didn't support all of the CSS syntax that was available there were always problems with layouts not working correctly in their browser. A workaround was introduced using the "@import" rule. The idea behind this rule is to create two separate CSS files, one which included CSS syntax that was understandable by all browsers and one that had the CSS syntax in it that wasn't understood by the Netscape Navigator.

As the "@import" rule was not readable for NN4.x it overlooked the code and read only the standard rules that were provided.

Since adding the base style sheet to your custom template overrides the base style sheet, just include the base style sheet in your template and add the bits to the end of that style sheet that Nathan indicated.

Or, as you indicated, you can add it to the base style sheet.  However, please check your templates to see if they include the style sheet in the template as if that is the case, it will not pick up the additions from the base template.

Geeks, making the world a better place
Quote · 18 Sep 2013

 

There have been discussions that @import should not be used.  For one, it adds a layer to the upkeep of style sheets.  More importantly, it adds delays in the loading of style sheets.

A bit of history of @import.

The "@import" rule was introduced due to Netscape Navigator 4.x

As Netscape at the time didn't support all of the CSS syntax that was available there were always problems with layouts not working correctly in their browser. A workaround was introduced using the "@import" rule. The idea behind this rule is to create two separate CSS files, one which included CSS syntax that was understandable by all browsers and one that had the CSS syntax in it that wasn't understood by the Netscape Navigator.

As the "@import" rule was not readable for NN4.x it overlooked the code and read only the standard rules that were provided.

Since adding the base style sheet to your custom template overrides the base style sheet, just include the base style sheet in your template and add the bits to the end of that style sheet that Nathan indicated.

Or, as you indicated, you can add it to the base style sheet.  However, please check your templates to see if they include the style sheet in the template as if that is the case, it will not pick up the additions from the base template.

The performance hit is basically non-existent and it's easier to maintain in case the base template has any changes (e.g., new icons or classes added, etc.) in a future version.

 

You can copy the CSS file from the base template, but there's no real advantage over the method above.  Also, the base template should never be edited - make changes in a custom template or /tmpl_uni.

BoonEx Certified Host: Zarconia.net - Fully Supported Shared and Dedicated for Dolphin
Quote · 18 Sep 2013
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.