beachnero.blogg.se

1. #Flaticon adding a new icon to an existing font how to#
2. #Flaticon adding a new icon to an existing font generator#

Then, follow the pattern above to create a new CSS rule.įor example, add a LinkedIn icon with the following CSS rule. įor additional social media icons, copy the unicode (the value after content) from FontAwesome's website. Here's the code for the icons listed above.

The final step is to add styling that pulls in the actual icon for each social media network. nav-linkedin a::before.Ĭode Injection now looks like this: Add the social media icons For example, for LinkedIn, you would add. Otherwise, you'll need to update them to include the new social media network. If the social media network you want to use is already included, then you can copy these styles as is. Notice that the styles include the names of the social media networks. Next, add the base icon styling right after the line of code from the previous step. Paste in the following line of code and click Save. Go to Settings → Code Injection → Site Header. We're going to use FontAwesome as our icon library.

#Flaticon adding a new icon to an existing font how to#

To see how to add the icons manually or learn more about the process, continue the tutorial below.Ĭhoose your theme and social media networks to get started. This will take you to a bigger view of the icon and a selection of formats to download the desired icon (PNG/SVG/EPS/BASE 64/PSD). Click Save and you're done 🥳 Remember that you still need to add the navigation items, as explained in the previous step. You have three different ways to download icons from Flaticon: Download of individual icons: To download icons individually, click on the icon. Then, copy the code and paste it into Settings → Code Injection → Site Header.

#Flaticon adding a new icon to an existing font generator#

Code generatorįollow the rest of the tutorial for a step-by-step guide on how to write the code for your theme - or take a shortcut and use our generator to create the code for you automatically.Ĭhoose your official Ghost theme and the social media icons you want. For example, to add a link to your Instagram page, use "Instagram" as the navigation label. It's essential that the label be the name of the social media network. To the Primary Navigation area, add a new item for every social media network you want to include. The techniques presented below can also be applied to other Ghost themes.

It is a simple way to create a responsive design and they are easy to manipulate with CSS3. These formats are used by web designers and allow you to download a file that contains all icons in the form of a code. This tutorial uses the default Ghost theme, Casper, as a working example. Apart from PNG, SVG, EPS, and PSD formats, you can download your collection as an icon font or SVG sprite.