[bengiltrapParticipant]

Hi,

I have created an icon font, and have installed it in my child theme folder. I want to use my custom icons to replace the icons here: http://index.com.au/home-4/#Our-Capability

I am sure this is easy enough to do, I just cant get it to work

I have attached a screenshot of the icon info

Thanks!

[John EzraMember]

Hi there,

Thanks for writing in! What font are you using? Have you called that font via CSS for the “i” tags? If not, you need to do that before your content codes become recognizable. If you did, then we may need to check if something is conflicting. Please provide us with login credentials so we can take a closer look. To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[bengiltrapParticipant]

This reply has been marked as private.

[John EzraMember]

Hi there,

Thanks for updating the thread! Would you mind providing us your FTP credentials so we can check your files? Were you able to use the @font-face to call you font in your child theme’s style.css file?

If not you can learn more about it here: https://css-tricks.com/snippets/css/using-font-face/

Let us know how that goes. Hope this helps – thanks!

[bengiltrapParticipant]

Thanks for looking!

I managed to get what I wanted. However, it has made all the other icons disappear!

Also, they dont seem to appear on internet explorer

[Paul RModerator]

Hi,

It looks like the url to your font files are incorrect.

Please upload all font files in your child theme – wp-content/themes/x-child/fonts

Kindly note that you need to create the fonts folder.

After that remove the code in your Custom > css that reads.

@font-face {
    font-family: 'indexicon';
    src:    url('fonts/indexicon.eot?s37x3q');
    src:    url('fonts/indexicon.eot?s37x3q#iefix') format('embedded-opentype'),
        url('fonts/indexicon.ttf?s37x3q') format('truetype'),
        url('fonts/indexicon.woff?s37x3q') format('woff'),
        url('fonts/indexicon.svg?s37x3q#indexicon') format('svg');
    font-weight: normal;
    font-style: normal;
}

i.icon-index {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'indexicon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-indexstrategy:before {
    content: "e900";
}
.icon-indexmanagement:before {
    content: "e901";
}
.icon-indexapplication:before {
    content: "e902";
}
.icon-indexdigital:before {
    content: "e903";
}
.icon-indexinformation:before {
    content: "e904";
}
.icon-indexprogram:before {
    content: "e905";
}
.icon-indextechnical:before {
    content: "e906";
}
.icon-indextesting:before {
    content: "e907";
}

Then add this in your child themes style.css – wp-content/themes/x-child/style.css

@font-face {
    font-family: 'indexicon';
    src:    url('http://index.com.au/wp-content/themes/x-child/fonts/indexicon.eot?s37x3q');
    src:    url(http://index.com.au/wp-content/themes/x-child/'fonts/indexicon.eot?s37x3q#iefix') format('embedded-opentype'),
        url('http://index.com.au/wp-content/themes/x-child/fonts/indexicon.ttf?s37x3q') format('truetype'),
        url('http://index.com.au/wp-content/themes/x-child/fonts/indexicon.woff?s37x3q') format('woff'),
        url('http://index.com.au/wp-content/themes/x-child/fonts/indexicon.svg?s37x3q#indexicon') format('svg');
    font-weight: normal;
    font-style: normal;
}

i.icon-index {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'indexicon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-indexstrategy:before {
    content: "\e900";
}
.icon-indexmanagement:before {
    content: "\e901";
}
.icon-indexapplication:before {
    content: "\e902";
}
.icon-indexdigital:before {
    content: "\e903";
}
.icon-indexinformation:before {
    content: "\e904";
}
.icon-indexprogram:before {
    content: "\e905";
}
.icon-indextechnical:before {
    content: "\e906";
}
.icon-indextesting:before {
    content: "\e907";
}

Hope that helps.

[bengiltrapParticipant]

This worked! Thank you so much! I realise now I put the fonts in the wrong folder haha

There is one problem though – the icons don’t display on internet explorer or firefox.

Do you know how to fix this?

[Paul RModerator]

Hi,

Sorry, there is a syntax error in the code.

Kindly change the code in your style.css to this

@font-face {
    font-family: 'indexicon';
    src:    url('http://index.com.au/wp-content/themes/x-child/fonts/indexicon.eot?s37x3q');
    src:    url('http://index.com.au/wp-content/themes/x-child/fonts/indexicon.eot?s37x3q#iefix') format('embedded-opentype'),
        url('http://index.com.au/wp-content/themes/x-child/fonts/indexicon.ttf?s37x3q') format('truetype'),
        url('http://index.com.au/wp-content/themes/x-child/fonts/indexicon.woff?s37x3q') format('woff'),
        url('http://index.com.au/wp-content/themes/x-child/fonts/indexicon.svg?s37x3q#indexicon') format('svg');
    font-weight: normal;
    font-style: normal;
}

i.icon-index {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'indexicon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-indexstrategy:before {
    content: "\e900";
}
.icon-indexmanagement:before {
    content: "\e901";
}
.icon-indexapplication:before {
    content: "\e902";
}
.icon-indexdigital:before {
    content: "\e903";
}
.icon-indexinformation:before {
    content: "\e904";
}
.icon-indexprogram:before {
    content: "\e905";
}
.icon-indextechnical:before {
    content: "\e906";
}
.icon-indextesting:before {
    content: "\e907";
}

Thanks

[bengiltrapParticipant]

Thank you, but this did unfortunately not fix it for Firefox

[ZeshanMember]

Hi there,

I’ve checked your site on Firefox and icons are showing fine (see: http://prntscr.com/aot506). Would you mind confirming the issue again?

Thank you!

[bengiltrapParticipant]

I managed to fix the issue by recreating my icon font on icomoon, making sure to select ‘Include Metadata in Fonts’

Thanks for all your help!

[Prasant RaiModerator]

Happy to hear that. Feel free to ask us again. Have a great day! 🙂

[Author]

Posts