Topic: How to Install Custom Icon Fonts

1 2 →

Author

Posts
August 22, 2014 at 6:14 pm #90570

FAIRRODGER
Participant

Hello X Team!

We were looking for a ‘car’ icon in the list provided and unfortunately couldn’t find one.

Can you please guide us in the right direction as to how we can install an icon font that is already made or a custom ones that we have created (via icomoon.io).

Thank you so much!

August 22, 2014 at 7:02 pm #90586

Rad
Moderator

Hi there,

Thanks for posting in!

X icons uses font-awesome icons, and icomoon.io has different implementation which will require custom development.

How about using icons from here http://fortawesome.github.io/Font-Awesome/cheatsheet/ ?

Thanks!

August 28, 2014 at 12:55 pm #94155

FAIRRODGER
Participant

This reply has been marked as private.

August 28, 2014 at 2:37 pm #94245

Mrinal
Member

Hi Fairrodger,

You’ve added padding to that content band, so it’s creating huge space before it’s content: http://puu.sh/bbI6b/52288a991c.png (Please remove that padding from visual composer)

August 29, 2014 at 12:26 pm #94959

FAIRRODGER
Participant

I have removed the padding as you suggested and the problem still occurs. When I inspect element, it appears that the custom headline has the extra height, but I’ve made it 0px now.

August 29, 2014 at 2:14 pm #95014

Rad
Moderator

Hi there,

Great to hear that! You can add mtn class too at your custom headline, this will remove extra margin that creates larger height.

Thanks.

August 29, 2014 at 3:31 pm #95052

FAIRRODGER
Participant

This reply has been marked as private.

August 29, 2014 at 4:15 pm #95071
Zeshan
Member
Hi Rodger!

Thank you for writing in!

Each icon has a different class starting with .x-icon- and the name of the icon attaching to the end of the class. So for the instagram icon, the code will be:
```
/* Normal State */
.x-icon-instagram {
   color: #c6c4c4;
}

/* Hover State */
.x-icon-instagram:hover {
   color: #727474;
}
```
You can change instagram to the other icon names, and it should work.

Hope this helps. 🙂

Thank you.
September 3, 2014 at 5:05 pm #97934

FAIRRODGER
Participant

Hello Support!

I took your recommendation to use the Cheatsheet for FontAwesome. I’m running into two issues:
1). The icon is not located in the Icon List dropdown menu
2)). If I update the HTML text with <fa fa-example>, <fa-example>, or <example>, it still only populates icons that are available in the dropdown list.

FontAwesome has a wide array of fonts that I want to use temporarily until I can install my own from Icomoon.co. However, they recommend pasting the following into the <head> of the site’s HTML.

<link href=”//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css” rel=”stylesheet”>

I’m using a child theme and I don’t know where the file is located within the site’s folders.

Can you please guide me in the right direction so that we can update our icons to be more specific to this project?

Thank you so much!

September 3, 2014 at 5:34 pm #97961

Rad
Moderator

Hi there,

Given that you have child theme, you can do that by adding this at your child theme’s function.php

add_action('wp_head', function(){ ?> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <?php });

And it will render at <head>.

Cheers!

September 3, 2014 at 8:20 pm #98026

FAIRRODGER
Participant

That worked beautifully! Wow. Thank you!

September 3, 2014 at 10:48 pm #98090

Christian
Moderator

You’re welcome/

September 16, 2015 at 12:18 pm #392975

TheCrambler
Participant

Hi there!

I’m trying to figure out how to add some “developer” type icons to my site. I want to add “devicons” to my font set to be able to reference them and use them.

They offer a CDN link that I’m guessing I could just link to using the add_action function similar to the one referenced a few posts back.

However, I’m assuming that having the actual fonts and CSS files placed onto my hosting server is a better route considering page load time and things like that? Or, should it not really matter?

If hosting the font files is the best route, how exactly would I go about adding it to my site? Would I upload the .eot, .svg, .ttf, and .woff files to a “fonts” folder and then upload the “devicons.css”, “devicons.min.css”, and “devicons.scss” files to a folder? Then I think I’d have to reference the font using @font-face some place in a CSS file, but I’m not sure if that should go into a child style.css file or some place else.

Any help pointing me in the right direction for this would be much appreciated!! Thank you! 🙂

September 16, 2015 at 12:52 pm #393016

TheCrambler
Participant

Never mind, pretty sure I got it figured out!

I downloaded devicons from http://vorillaz.github.io/devicons/#/main

For anyone wondering, I copied the devicons.eot, devicons.svg, devicons.tff, and devicons.woff files into my wp-includes/fonts folder. I then copied the devicons.css and devicons.min.css into my wp-includes/css folder which has the @font-face declaration already in it. You just have to make sure the @font-face declarations are pointing to the correct URLs for your site.

Lastly, I added this to my child theme’s functions.php file:
add_action('wp_head', function(){ ?> <link rel="stylesheet" id="devicons-css" href="http://yoursitehere.com/wp-includes/css/devicons.min.css"> <?php });

And voila! After referencing something like <span class="devicons devicons-sass" style="color: blue; font-size: 64px;"></span> on one of my pages, everything worked great!

Hope this helps someone.

September 16, 2015 at 2:21 pm #393111

Jade
Moderator

Glad you sorted it out. Thanks for sharing. 🙂
Author

Posts

1 2 →

<script> jQuery(function($){ $("#no-reply-90570 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>