Font Awesome integration

Vitaliy WD
188 Posts
Vitaliy WD posted this 29 January 2015

Hello.

It would be a great feature to use Font Awesome (http://fortawesome.github.io/Font-Awesome/) in Themler.
Maybe with shortcodes or better - with GUI option (to view all icons inside Themler and choice it to insert).

To users: please vote for this topic if you have interest in this feature.

Hello. It would be a great feature to use Font Awesome (http://fortawesome.github.io/Font-Awesome/) in Themler. Maybe with shortcodes or better - with GUI option (to view all icons inside Themler and choice it to insert). To users: please vote for this topic if you have interest in this feature.
Vote to pay developers attention to this features or issue.
11 Comments
Order By: Standard | Newest
shaulhadar
400 Posts
shaulhadar posted this 29 January 2015

Hi Vitality, this is actually already integrated in a themler widget.

If you go to : "Insert" - "Navigation" - "Icon Link" and drag it to themler, you will actually get a standalone font awesome element in which you can pick any icon you want :)

I hope this helps you.

I am actually interested in using fontawesome links in menu items.... i hope it will be integrated sometime :)

Hi Vitality, this is actually already integrated in a themler widget. If you go to : "Insert" - "Navigation" - "Icon Link" and drag it to themler, you will actually get a standalone font awesome element in which you can pick any icon you want :) I hope this helps you. I am actually interested in using fontawesome links in menu items.... i hope it will be integrated sometime :)
Support Team
Support Team posted this 29 January 2015

Vitaliy,

All available icons are listed here:
http://answers.billiondigital.com/articles/3942/icons-shortcode

You can use them with shortcode or through the Themler UI: using IconLink or icon selection popup of the controls that support icons.

Thank you,
Olivia

Vitaliy, All available icons are listed here: http://answers.billiondigital.com/articles/3942/icons-shortcode You can use them with shortcode or through the Themler UI: using IconLink or icon selection popup of the controls that support icons. Thank you, Olivia
Vitaliy WD
188 Posts
Vitaliy WD posted this 29 January 2015

Thanks for reply and hint, shaulhadar.

If you go to : "Insert" - "Navigation" - "Icon Link" and drag it to
themler, you will actually get a standalone font awesome element in
which you can pick any icon you want :)

How I can see - there is many icons, but it's actually not from Font Awesome library...

Here is full list of Font Awesome icons: http://fortawesome.github.io/Font-Awesome/icons/

Or I something miss? )

Thanks for reply and hint, shaulhadar. > If you go to : "Insert" - "Navigation" - "Icon Link" and drag it to > themler, you will actually get a standalone font awesome element in > which you can pick any icon you want :) How I can see - there is many icons, but it's actually not from Font Awesome library... Here is full list of Font Awesome icons: http://fortawesome.github.io/Font-Awesome/icons/ Or I something miss? )
Vitaliy WD
188 Posts
Vitaliy WD posted this 29 January 2015

Vitaliy,

All available icons are listed here:
http://answers.billiondigital.com/articles/3942/icons-shortcode

You can use them with shortcode or through the Themler UI: using IconLink or icon selection popup of the controls that support icons.

Thank you,
Olivia

Thanks for reply, Olivia.

Where is shortcode controls? Or I need just manualy insert code like <i class style></i> icon-adjust ?

> Vitaliy, > > All available icons are listed here: > http://answers.billiondigital.com/articles/3942/icons-shortcode > > You can use them with shortcode or through the Themler UI: using IconLink or icon selection popup of the controls that support icons. > > Thank you, > Olivia > > Thanks for reply, Olivia. Where is shortcode controls? Or I need just manualy insert code like `<i class style></i> icon-adjust` ?
Support Team
Support Team posted this 29 January 2015

Vitaliy,

You just need to manually insert

<i class="icon-adjust"></i>

in the place where you want the icon to appear. This could be HTML control, Text/TextGroup control on HTML tab or via CMS admin panel (post html source, text widget. etc.)

This is our own library ('Billion Web Font') similar to Font Awesome.

Thank you,
Olivia

Vitaliy, You just need to manually insert <i class="icon-adjust"></i> in the place where you want the icon to appear. This could be HTML control, Text/TextGroup control on HTML tab or via CMS admin panel (post html source, text widget. etc.) This is our own library ('Billion Web Font') similar to Font Awesome. Thank you, Olivia
Stagger Lee
1774 Posts
Stagger Lee posted this 06 June 2015

You should maybe consider to switch to Font Awesome. FA has everything that is needed on most websites. You can spare time and help them if you want to add some special icon. Just write it on Github.

Compare this (same browser) :

http://answers.themler.com/articles/3942/icons-shortcode

http://fortawesome.github.io/Font-Awesome/icons/

Your icons have jagged edges, FA icons dont have it.
No matter what I tried could not fix them. Works anyhow with default size. As soon font-size is above 20px you see clearly jagged edges.

Dont know if you generate your icons here:
https://icomoon.io/

But icons from Icomoon have not jagged edges. (when is default size, or enlarged)

https://icomoon.io/app/#/select

You should maybe consider to switch to Font Awesome. FA has everything that is needed on most websites. You can spare time and help them if you want to add some special icon. Just write it on Github. Compare this (same browser) : http://answers.themler.com/articles/3942/icons-shortcode http://fortawesome.github.io/Font-Awesome/icons/ Your icons have jagged edges, FA icons dont have it. No matter what I tried could not fix them. Works anyhow with default size. As soon font-size is above 20px you see clearly jagged edges. Dont know if you generate your icons here: https://icomoon.io/ But icons from Icomoon have not jagged edges. (when is default size, or enlarged) https://icomoon.io/app/#/select
Stagger Lee
1774 Posts
Stagger Lee posted this 06 June 2015

Here you can see differences between WordPress Dashicons SVG and Themler SVG icons. Same browser, same zoom.

First 2 screens are Dashicons, third is Themler.

http://attachments.answers.billiondigital.com/656/2656/2015-06-06-231003.jpg

http://attachments.answers.billiondigital.com/657/2657/2015-06-06-231015.jpg

http://attachments.answers.billiondigital.com/658/2658/2015-06-06-231029.jpg

Here you can see differences between WordPress Dashicons SVG and Themler SVG icons. Same browser, same zoom. First 2 screens are Dashicons, third is Themler. ![http://attachments.answers.billiondigital.com/656/2656/2015-06-06-231003.jpg][1] ![http://attachments.answers.billiondigital.com/657/2657/2015-06-06-231015.jpg][2] ![http://attachments.answers.billiondigital.com/658/2658/2015-06-06-231029.jpg][3] [1]: http://attachments.answers.billiondigital.com/656/2656/2015-06-06-231003.jpg [2]: http://attachments.answers.billiondigital.com/657/2657/2015-06-06-231015.jpg [3]: http://attachments.answers.billiondigital.com/658/2658/2015-06-06-231029.jpg

Last edited 06 June 2015 by Stagger Lee

Support Team
Support Team posted this 08 June 2015

Hi,

Thank you for the reporting this issue.
Looks like it happens in Chrome and Safari only.
We'll fix this issue in Chrome in the near future. Not sure about Safari. FA looks bad in Safari too.

Thank you,
Olivia

Hi, Thank you for the reporting this issue. Looks like it happens in Chrome and Safari only. We'll fix this issue in Chrome in the near future. Not sure about Safari. FA looks bad in Safari too. Thank you, Olivia
Stagger Lee
1774 Posts
Stagger Lee posted this 14 January 2016

I cant find anymore icon for URL:

enter image description here

Why do you bother with your own icons. Use Fontawesome. There is no better around. And let other developers work for you.
Fontawesome has huge and vibrant community.

I cant find anymore icon for URL: ![enter image description here][1] [1]: https://cdn2.iconfinder.com/data/icons/web/512/Link-512.png Why do you bother with your own icons. Use Fontawesome. There is no better around. And let other developers work for you. Fontawesome has huge and vibrant community.
Stagger Lee
1774 Posts
Stagger Lee posted this 14 January 2016

If you miss some icons take back Bootstrap native glyphicons:

  • Go here and deactivate all options except glyphicons:
    http://getbootstrap.com/customize/
  • Download ZIP file
  • Extract all SVG files inside theme "fonts" folder
  • Take CSS code from ZIP (only part for glyphicons, other code can give you problems) and paste it inside Themler -> Settings -> Additional CSS.
  • Remove one bullet from paths:

    @font-face {
    font-family: 'Glyphicons Halflings';
    src: url('./fonts/glyphicons-halflings-regular.eot');
    src: url('./fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('./fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('./fonts/glyphicons-halflings-regular.woff') format('woff'), url('./fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('./fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
    }

  • Use icon codes:
    http://getbootstrap.com/components/#glyphicons

If you miss some icons take back Bootstrap native glyphicons: - Go here and deactivate all options except glyphicons: http://getbootstrap.com/customize/ - Download ZIP file - Extract all SVG files inside theme "fonts" folder - Take CSS code from ZIP (only part for glyphicons, other code can give you problems) and paste it inside Themler -> Settings -> Additional CSS. - Remove one bullet from paths: @font-face { font-family: 'Glyphicons Halflings'; src: url('./fonts/glyphicons-halflings-regular.eot'); src: url('./fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('./fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('./fonts/glyphicons-halflings-regular.woff') format('woff'), url('./fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('./fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); } - Use icon codes: http://getbootstrap.com/components/#glyphicons
alsepl
28 Posts
alsepl posted this 12 January 2017

More can be connected by Google icon: https://material.io/icons/
And do not have to download anything.

More can be connected by Google icon: https://material.io/icons/ And do not have to download anything.
You must log in or register to leave comments