TIP: How to use a Font Awesome Icon for a language

Language string, that is.

If you ever want to display an icon in place of a text string, here's an example.

In admin > settings > language settings

Search for this language key string: _sys_status_update

This should return a single result: _sys_status_update (System) Edit

Click 'Edit'

Replace the existing string text with this: <i class="sys-icon status"></i>

Save the string. (The word 'status' adds an  additional class name, so we can target this specific string. You can name it anything you like, as long as it is unique)

Next add the following to your template's icons.css  Note the red text.

.sys-icon.status:before {
content: "\f044";
font-size:20px;
color:#333333;
margin-left:8px;
}

Save icons.css

In this specific example, the existing string "update status", which appears to the right of your status message, will be replaced with this Font Awesome icon: http://fortawesome.github.io/Font-Awesome/icon/pencil-square-o/

You can use any Font awesome icon: http://fortawesome.github.io/Font-Awesome/icons/

The line content: "\f044"; specifies the Unicode designator for the pencil-square icon.  By clicking  on any of the icons on the aforementioned page, you will see the individual icon page where the unicode is given.  To use a different icon, just replace 'f044' with the Unicode of your desired icon.

Hi Houstonlively ,

Thanks for this great tip , it works but there's a little annoying prob , i can't figure how to sort it out .

I five you an example :

I did a change to the  _sys_module_ads , by inserting this as well as adding this to the css icon .sys-icon.buysellads:before               { content: "\f20d";font-size:32px;color:#BE1E2D;margin-left:0px;} But nothing happen to the Ads in Top menu.

But if i change this _bx_ads_Ads to the above I class , it does show an Icon but it does affect Tags as well , instead of showing Ads in tags it show the I class code...

Now my question is how to have A Top Menu Icon without affected the rest of language strings ?

Thanks for your help.

I just noticed that my previously posted code in the original post has vanished.

<i class="sys-icon status"></i>

That was the original example code to be placed in the language string.  Not sure how that got stripped out... it was there when I made the original post.

Update: AlexT fixed the forum weirdness and everything seems OK now.

 GG and Nathan have reported problems with posting code, as well.

Yeah... and it seems the fuckedupness is retroactive fixed.

I got the code , i replaced it in the language string _bx_ads_Ads and it works (check picture attached AforAdsintopmenu.png) but it does affect other  language strings as  in Tags and also admin area, check pictures attached. TagsAdshowclasscode.png and AdminAd.png  ...

Is there any other way to work thing's out without affecting those . 

Thank you for your help.

Eli, Dolphin frequently uses the same language key in multiple places, as you have discovered.  If you want it to apply only to the top menu items, you'll need to create a unique language key for top menu items where you want to use an icon, then make the appropriate change to the language key in navigation menu builder.

Thanks i think i did sort it  out :), One more question , let say if i upgraded to 7.2 when it comes , do i have to do the same changes again ?

thank you.

If you changed any of the files that dolphin provides. Then yes you will have to make your changes over on the updated files. If you copied the UNI template and made up your own template out of it and renamed it to something else then No. But you might have to see what was changed in the default files when there updated.

EDIT: I can't say about the language key unless you made up your own.

Ok cool , i copied the Alt template  and named it Alto. that's pretty much about it...

I did make my own and it's working for now lol Thanks