Elegant Themes Icon font

Stylish designs Symbol font

Elegant symbol font has just been improved with 50 new business symbols. Today we are continuing our quest to develop the most attractive and durable symbol font on the web - for free! The Elegant Icon Font was published in August with 310 wonderful symbols packed comfortably in a unique font database. Symbolic fonts allow us to show nice vector-based images in our design, but they can also be used for many other things, so we made them available for free use!

Pixels are accurate for font formats that are a multiple of sixteen px, but can be used in any required font format. Click here to get the complete 360 icon kit. We had many issues about how to include a font in a website. First thing you need to do is embedded the font with CSS.

This can be done by modifying the style of your website's style sheet, or if you use an elegant design, you can insert the appropriate style sheet into the Custom Style Sheet in ePanel. In your WordPress Dashboard, find the design options menus under the Appearances page, and then search for the Custom Style Sheet field.

When you are not using Elegant Design, you can use Appearances > Editor to apply the design to your own design using the Appearances > Editor. You can also use the Save as script or make a design for a kid. Please note: If you are modifying your design, it is a great suggestion to make a sub design instead of modifying the design originals, otherwise you will have to make the changes again each time you upgrade your design.

<font color="#ffff00">@font-face { font-family: 'ElegantIcons'; src:url('/fonts/ElegantIcons. eot'); src:url('/fonts/ElegantIcons.eot?) file') format('svg'); font: regular; [data-icon]:before { } font:'ElegantIcons'; content: attr(data-icon); speak: none; font: regular; font: regular; text transformation: none; line height: 1; -webkit-font-smoothing: antialiased; you will also find a file named'fonts' in the icon-pakage. Drag this subdirectory to the root of your website, so that it is situated at www.yourwebsite.com/fonts. .

Then you can give each HTML item the datacontribute with the value of the desired symbol. For a complete listing of symbols and their associated Unicode weights, see the Symbol Fonts Downloads page. If, for example, I wanted to use the Up Arrow icon, I could make a chip with the value of "!" in the value of the symbol and then resize and match the colour of the item.

When all goes well, you have successfully integrated ElegantIcons into your website. Chris Ferdinandi has some good documentations on this topic for a few more implementations and a more detailled explanation of how to include this font. If I' m not working on new topics too much, I like to write one or two articles in our blogs!

Auch interessant

Mehr zum Thema