- This topic has 9 replies, 4 voices, and was last updated 6 years, 2 months ago by Kai-Yen.
-
AuthorPosts
-
January 8, 2018 at 7:34 am #465872Kai-Yen
Hi all Generatepress lover,
I created a few of customized icons from Fontello and download a zip file including css, font and .json.
What should I do to add these icons to a menu?
Could someone give me some hacks?I have followed the guidance > https://css-tricks.com/snippets/css/using-font-face/, and it doesn’t works.
January 8, 2018 at 9:46 am #465993LeoStaffCustomer SupportHi there,
Would this help? https://docs.generatepress.com/article/adding-custom-font/
If not does Fontello provided any instructions?
January 9, 2018 at 9:14 pm #467224Kai-YenHi Leo,
I found someone shared an instruction.
But, generatepress folder doesn’t have a font folder.——————————————————————————————–
Move the font folder into your project. Your project might look something like this:/project-root
— /stylesheets
— /images
— /javascripts
— /font
Include the Fontello css. Inside the “css” folder in the bundle, you’ll see:[yourfontname]-codes.css
[yourfontname]-embedded.css
[yourfontname]-ie7-codes.css
[yourfontname]-ie7.css
[yourfontname].css
For most cases, you will only need [yourfontname].css. Include that stylesheet in your project.Inside [yourfontname].css is the @font-face rule that imports the font. Make sure the paths to the fonts are pointing to the right place. By default, they will look in ../font/.
To use your icons, add class=”icon-ICON_NAME” to an element that you want to have an icon. You can see the list of icon names at the bottom of [yourfontname].css.
Optional: Fontello puts a margin-right: .2em on the icon because it expects you to use the icon with text, but sometimes you might want a standalone icon. I like to use <i> tags for standalone icons, so I add the following rule to the bottom of the fontello css:
i[class^=”icon-“]:before, i[class*=” icon-“]:before {
margin: 0;
}
Now if you put class=”icon-ICON_NAME” on an <i> tag, it will not have any unwanted margin.
——————————————————————————————–January 10, 2018 at 9:40 am #467743TomLead DeveloperLead DeveloperHi there,
You would need to upload the font files into your child theme: https://docs.generatepress.com/article/using-child-theme/
That way you can create your own fonts folder.
January 11, 2018 at 7:02 am #468421Kai-YenHi Tom,
Thanks for your answer. I am able to make 50% of my wish, and these icons render as a box.
It seems to need some steps to get right.So I am wondering whether lightweight social icon customisable to upload any icons.
January 11, 2018 at 9:30 am #468520LeoStaffCustomer SupportWhat icons are you looking for?
Perhaps FontAwesome is an option? http://fontawesome.io/icons/
January 11, 2018 at 7:18 pm #468885Kai-YenHi Leo,
I need LINE message icon shown below, which is not avaiable on forntawesome.
January 11, 2018 at 8:54 pm #468929LeoStaffCustomer SupportHmm unfortunately it’s not possible to customize LSI.
Maybe just use an image?
January 12, 2018 at 1:17 am #469009HeikoTried this?
1. Copy your files in your child theme.
2. Open functions.php from you childs theme and addfunction wp_load_fontello() { wp_enqueue_style( 'wp-fontello', get_stylesheet_directory_uri() . '/css/[yourfontname].css' ); } add_action( 'wp_enqueue_scripts', 'wp_load_fontello' );
January 12, 2018 at 5:43 am #469107Kai-YenHi Heiko,
I found another solution. Add [yourfontname]-embedded.css into theme css, then icons show on my website.
However, did you add those code to functions.php?function wp_load_fontello() { wp_enqueue_style( 'wp-fontello', get_stylesheet_directory_uri() . '/css/[yourfontname].css' ); } add_action( 'wp_enqueue_scripts', 'wp_load_fontello' )
-
AuthorPosts
- You must be logged in to reply to this topic.