Archived topic
Installing icons
7 replies · Started by James on July 4, 2019
Hi,
I would like to add a few Icons (either fontawesome or Icomoon) to my site. I know the easiest route would be to use the better fontawesome plugin you have recommended, however it has not been updated in the last three releases of wordpress so I am not convinced it would be secure to use it.
Therefore could you provide some simple step by step instructions on how to install and use the icons locally (I don't want to use a CDN)? I am not a developer but I do know how to add CSS and probably copy and paste some PHP with the code snippets plugin.
Thanks in advance for your help.
James
Hi there,
FontAwesome is just a font so it should be the same steps here:
https://docs.generatepress.com/article/adding-local-fonts/
FA also has a official plugin as well if you are worry about the other one not being updated:
https://wordpress.org/plugins/font-awesome/
Let me know if this helps :)
Hi,
I followed the adding-local-fonts procedure, but it hasn't worked. A rectangular box is displayed instead of the desired icon.
I am using the following HTML to display the icon:
<i class="fas fa-bell"></i>
I have saved the Icomoon font files to the generatepress fonts folder:
wp-admin/themes/generatepress/fonts/
I am not using a child theme.
I am using a local wordpress installation using WAMPSERVER.
I have added the following CSS using the simple CSS plugin:
@font-face {
font-family: 'icomoon';
src: url('http://conkertutoringtest/conkertutoring/wp-admin/themes/generatepress/fonts/icomoon.eot?4u9m3h');
src: url('http://conkertutoringtest/conkertutoring/wp-admin/themes/generatepress/fonts/icomoon.eot?4u9m3h#iefix') format('embedded-opentype'),
url('http://conkertutoringtest/conkertutoring/wp-admin/themes/generatepress/fonts/icomoon.svg?4u9m3h#icomoon') format('svg'),
url('http://conkertutoringtest/conkertutoring/wp-admin/themes/generatepress/fonts/icomoon.ttf?4u9m3h') format('truetype'),
url('http://conkertutoringtest/conkertutoring/wp-admin/themes/generatepress/fonts/icomoon.woff?4u9m3h') format('woff');
font-weight: normal;
font-style: normal;
}
[class^="fa-"], [class*=" fa-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !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;
}
.fa-bell:before {
content: "\e900";
}
.fa-bolt:before {
content: "\e901";
}
.fa-book-reader:before {
content: "\e902";
}
.fa-brain:before {
content: "\e903";
}
.fa-concierge-bell:before {
content: "\e904";
}
.fa-fish:before {
content: "\e905";
}
.fa-pencil-alt:before {
content: "\e906";
}
.fa-spell-check:before {
content: "\e907";
}
Regards
James
Hi there,
You definitely want to use a child theme to do this, or you will lose all of your font files/customizations when you update the theme.
Once you do that, try using this HTML instead:
<i class="fa fa-bell"></i>
Hi Tom,
I understand that changes will be overwritten when the theme updates and I will definitely try a child theme, however I would like to know why it currently does not work?
I have tried the HTML you suggested but it still does not work.
Thanks
James
Can you link me to the page where the icons should be showing?
Hi,
It's on my pc as a local install using wampserver. I don't want to connect wampserver to the internet at this point.
So from what you are indicating, it should work as it is and therefore it probably won't work in a child theme.
Looking at the code, I don't see why not. You could try changing all of the fa parts of the code to your own prefix in case they're conflicting with Font Awesome.
I would need to inspect the code to know 100% why it's not working, unfortunately.
