Ask Your Question
4

How can I enable automatic color filling when creating a font from an SVG Figma icon using Icomoon?

asked 2021-10-30 11:00:00 +0000

qstack gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
2

answered 2023-01-16 10:00:00 +0000

ladyg gravatar image

To enable automatic color filling when creating a font from an SVG Figma icon using Icomoon, you need to follow these steps:

  1. Open your SVG file in Figma and make sure that it has only one layer.

  2. Convert the layer into a vector by selecting it and then click on "Vectorize".

  3. Export the vector as an SVG file by selecting it and then click on "Export".

  4. Open Icomoon and select "New Icons Set" to create a new icon set.

  5. Click on the "Import Icons" button and select your SVG file.

  6. In the "Configure" tab, make sure that the "Font Name" is set to the desired name and click on "Generate Font".

  7. In the "Download" tab, download the font files.

  8. In your CSS file, add the following code to enable automatic color filling:

.icon {
  fill: currentColor;
}
  1. Use the font by adding an icon class to your HTML code and setting the color using CSS.

For example:

<i class="icon my-icon" style="color: red;"></i>

This will fill the icon with the current color specified in the CSS.

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer


Question Tools

Stats

Asked: 2021-10-30 11:00:00 +0000

Seen: 12 times

Last updated: Jan 16 '23