Ever wanted to make a custom icon font for your websites or to use in documents on your computer? If you design custom icons, you can easily turn SVG files into a font that you can use anywhere you’d like. This tutorial will take you through the steps to generate your custom font in no time.
Resources
💻 Programs & Services Mentioned in Video
Adobe Illustrator: https://www.adobe.com/products/illustrator.html
IcoMoon: https://icomoon.io/
Divi // Elegant Themes: https://bit.ly/3mun7TN
WordPress: https://wordpress.org/
👉 ADDITIONAL FONT CREATORS
Fontastic: https://fontastic.me/
Fontello: https://fontello.com/
Glyphter: https://glyphter.com/
Futuramo: https://futuramo.com/apps/icons
Looking for resources to create websites?
Flywheel Web Hosting
Divi // Elegant Themes
YOUTUBEÂ COMMENTS ANSWERED
Want to know if you can change the color of an SVG image with CSS? You can! You can easily target this by adding a class. See the example below.
HERE’S THE SVG GRAPHIC
TAKE A LOOK THE CODE
THE CSS
.happy {fill:#ffca29;}
.happy:hover {fill:#ff9829;}The SVG ICON CODE
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
<g>
<path class="happy" d="M150,1.7c26.7,0,51.4,6.7,74.2,20s40.8,31.4,54.1,54.1c13.4,22.7,20,47.5,20,74.2s-6.7,51.4-20,74.2
c-13.4,22.7-31.4,40.8-54.1,54.1c-22.7,13.4-47.5,20-74.2,20s-51.4-6.7-74.2-20C53.1,265,35,246.9,21.7,224.2s-20-47.5-20-74.2
s6.7-51.4,20-74.2S53.1,35,75.8,21.7S123.3,1.7,150,1.7z M150,269.6c21.5,0,41.5-5.4,59.8-16.2c18.3-10.8,32.9-25.3,43.7-43.7
c10.8-18.3,16.2-38.3,16.2-59.8s-5.4-41.5-16.2-59.8c-10.8-18.3-25.3-32.9-43.7-43.7S171.5,30.4,150,30.4s-41.5,5.4-59.8,16.2
S57.3,71.8,46.5,90.2S30.4,128.5,30.4,150s5.4,41.5,16.2,59.8s25.3,32.9,43.7,43.7C108.5,264.3,128.5,269.6,150,269.6z M72.2,135.6
c-2.8-0.8-4-2.6-3.6-5.4c0.8-12,4.7-22,11.7-30.2s14.3-12.3,21.8-12.3c7.6,0,14.9,4.1,21.8,12.3s10.9,18.2,11.7,30.2
c0.4,2.8-0.7,4.6-3.3,5.4s-4.5,0-5.7-2.4l-6-10.2c-4.8-8.8-11-13.2-18.5-13.2c-7.6,0-13.8,4.4-18.5,13.2l-6,10.2
C76.4,135.6,74.6,136.4,72.2,135.6z M213.4,179.3c2.8-1.2,5.4-0.8,7.8,1.2c2.4,2,3.2,4.6,2.4,7.8c-1.6,8.8-6.4,17.2-14.4,25.1
c-7.2,6.8-16.3,12.3-27.2,16.5c-11,4.2-21.6,6.3-32,6.3s-21-2.1-32-6.3s-20-9.7-27.2-16.5c-8.4-8-13.2-16.3-14.4-25.1
c-0.8-3.2,0-5.8,2.4-7.8c2.4-2,5-2.4,7.8-1.2c16.3,5.2,37.5,7.8,63.4,7.8S197.1,184.5,213.4,179.3z M167.9,135.6
c-2.8-0.8-4-2.6-3.6-5.4c0.8-12,4.7-22,11.7-30.2s14.3-12.3,21.8-12.3c7.6,0,14.9,4.1,21.8,12.3s10.9,18.2,11.7,30.2
c0.4,2.8-0.7,4.6-3.3,5.4s-4.5,0-5.7-2.4l-5.4-10.2c-5.2-8.8-11.6-13.2-19.1-13.2c-7.6,0-13.8,4.4-18.5,13.2l-6,10.2
C172.1,135.6,170.3,136.4,167.9,135.6z"/>
</g>
</svg>
Looking to build a website and not sure where to start?
Get my FREE Building a Website: Getting Started Checklist to learn how to plan and build your site.
Disclosure: Some of the links in this post are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission.
