When I first started messing around with icons not performing the Compound Path function was what kept messing me up. Open the file again in the program you used to create it and make sure the requirements mentioned above were followed. If all you get is a square outline, something was wrong with your SVG file. Once all your icons are uploaded they will appear under the Custom Icons header. Simply drag and drop your SVG files onto the page. There are other online converters like IcoMoon, Fontastic, and more that all essentially do that same thing. We are essentially turning our icons in a font that a browser can read and render. Webfont also known as Web Open Font Format or WOFF for short is a format for supporting fonts on modern browsers which provides the ability for vector scaling and colorizing. Fontello other than being a great library of already-made icons is also an SVG to Webfont converter. Now that we have our SVG file or files let’s visit the Fontello site at. I’m using basic shapes for demonstration purposes but the same ideas apply to anything you want to create a compound path with, so have at it! Something I would definitely recommend playing around with. This can allow you to make some intricate layouts. If there are three or more elements on top of each other whatever outline they make will remain when the compound path is made. If we reset our example graphic and now add a triangle into the mix, putting it to overlap part of the square and now make our compound path we see how adding more elements affects the results. If we undo Compound Path and move the square so that it’s hanging over the edge and preform the function again we see only the part of the square that’s on top of the circle gets cut while the rest of it that’s outside of the circle remains, again we see now that it’s just one path and not two different elements stacked on top of each other. We see that now the square was cut out of the circle essentially flattening our graphic. If we put the square on top of the circle, select them both and go to the Object menu, then down to Compound Path, and select Make or use the shortcut CTRL and 8. Let’s see a few examples of how this works. As the name implies this function combines multiple paths into one and in the process paths are removed and cut. The easiest way to do this and get your icon ready for export is to use the Compound Path option under the Object menu in Illustrator. Such as sizes not being consistent between the editor and the live page, colors being overwritten, or any number of other issues that have cropped up over the years, I’m guessing from compatibility issues with other plugins. I’ve also found some quarks with particular widgets when using uploaded SVGs as icons. It’s so much more convenient and easier to maintain going forward. Instead of making different colored versions of the same icon you only need one that can then be changed into any color with the Elementor settings or simple CSS if you’re not in WordPress. The simple answer is that you don’t have to, you could create your custom icons and upload them directly to your site as an SVG file with no problem but if you wanted to say, have your icon change color when hovered over, or be available in the icon library in the future without having to search for it in the media library, or create a stacked and white version, it’s much easier to have these capabilities when your custom icons are converted to font files.įor me, the biggest advantage is the ability to change the color on the fly. As it supports most of web browsers, people have started using this method to integrate fonts instead of old methods.Before we start I want to answer the question of why we need to go through this process when the free version Elementor allows you to upload SVGs into any of the widgets that support icons. What is is nothing but a new trick that helps users to load custom font on your webpage. If you are planning to implement custom font, this is a good option to choose rather than any other process that most of the recent themes provide. Either get a custom font from respected designer or purchase something from different third party font providers like TypeKit, MyFonts etc. As fonts play a crucial role in web designing, it is recommended to get a better font. Top 5 Online Font Converters to Generate is considered the most modern and most trending web designing technique to load custom font depending on prerequisites.
0 Comments
Leave a Reply. |