Skip to main content

Upload your own custom icons to your website using Elementor Pro's Custom icons characteristic. You can use Fontello, Icomoon, or Fontastic for the job.



Creating your font set

Fontello

  1. Go http://fontello.com/
  2. Choose some icons or upload your own custom SVG files
  3. Click on the wrench. Add a CSS prefix. Make sure it's unique
  4. Give your font a name
  5. Download the source (zip file)

IcoMoon

  1. Go https://icomoon.io/app
  2. Choose some icons or upload your own custom SVG files
  3. Click on the 'Generate sourceeyelash
  4. Click on the preferences button
  5. Give your font a name
  6. In 'Class Prefix', give it a unique prefix
  7. Click the X to exit
  8. Click on 'to download'to download your font (zip file)

Fontastic

  1. Create a Fontastic account
  2. Select some icons or alternatively import your own
  3. To import click on 'Add more icons'in the top menu bar
  4. Click on the 'Modify fonteyelash
  5. Give your font a name
  6. Give your font a unique CSS class prefix
  7. Click Save
  8. Go to the 'Publish' tab
  9. Click on 'to download'to download your font (zip file)

Installing your font set

In WordPress dashboard, go to:

  1. Elementor> Custom Icons
  2. Click Add new
  3. Drag and drop the zip file of your source
  4. Enter the name of your icon set
  5. Click To update
  6. You will now find your new custom icons in the 'Custom Icons' area, where you will see your icon set name, icon number indicator, and your unique CSS Prefix for each icon set.