Introducing the Elegant Themes Icon Font
Subscribe To Our Youtube Channel
Download The Icons
Why Icon Fonts Are Awesome
How to Use the Elegant Icon Font on Your Website
Using the Elegant Icon Font on your site is easy, especially if you’re an Elegant Themes member. First, though, will need to upload one of the font files from the download link above into the Divi Builder. Then you can choose the icons from within most Divi modules’ Design tab, or you can use the unicode in your text to insert it the same way you would an ampersand or blank space. If you’re not a Divi user, we have a tutorial on how to use any font you want on your website without a plugin that will get your site all set up.Uploading the Elegant Icon Font into the Divi Builder
First of all, download the .ZIP file we linked to above, and unzip it on your computer. Then, find the elegant_font folder and navigate to HTML CSS -> Fonts. Inside that folder, you will find the various font files you can use.
After that, follow these steps to upload the font into the Divi Builder.
- Navigate into any module’s Header or Text section under the Design tab.
- Click on the Text Font (or Header Font) dropdown
- Press the Upload button to bring up the uploader modal
- Select any of the font files from the ZIP archive you downloaded
- Press the blue Upload button
You will see the font in the Design tab now. Because it is an actual font, the characters correspond to various keyboard buttons, which is why the name of the font that was entered as Elegant Icon Font is made up of various icons in the builder window.
And with that, your new Elegant Icon font is uploaded. If you don’t want to go through the builder, you can always follow our tutorial to add them to your site another way.
Using the Elegant Icon Font
Once you have uploaded the font to your site, you can set the font to any heading or text style that you want. As long as the Design tab has the Elegant Icon Font set, you can feel free to use either the keyboard or unicode characters listed below to display the font you’d like. Remember that you can customize each Heading size, so you could keep H6 in reserve for the Elegant Icon Font and pull it out when needed. Here is an example of two text modules with the same text, only one has the font set to the site’s default and the other is the Elegant Icon Font.
And because it’s a font, remember that you can size the icon up and down to suit your needs without loss of quality.
When I try to upload the icon font set (eleganticons.ttf) , I get an error that says “Sorry, you are not allowed to upload this file type” 🙁
Hi, you may follow this help guide on how to fix that: https://help.elegantthemes.com/en/articles/2844583-sorry-you-are-not-allowed-to-upload-this-file-type
First of all, thank you so much for this iconset. I’ve been using it for YEARS! Thank you also for all the hard work you put into the Divi theme. Even though it’s tough to justify a monthly subscription to the boss (I’m yet to convince him to do it), the lifetime subscription to the core theme has paid for itself so many times.
On to my question: Will you be updating the iconset with the ever so lovely X icon?
I’ve been wondering that myself. When will the bird icon be replaced with the X? It’s been over a year since the switch. 🙂
I am getting this “Sorry, you are not allowed to upload this file type.”
Hi there, you may check this article on how to fix that: https://help.elegantthemes.com/en/articles/2844583-sorry-you-are-not-allowed-to-upload-this-file-type
There are no icons on site in “Complete List Of Class Names” section 🙁 but icons works
have to use web.archive
There seem to be icons which are not listed here. What is the HTML code for the external link icon ? It’s in the icon module, but i’d like to use it in a text module and therefore need the right code.
The arrow icon I am seeking is not listed in this post either. I think we need an update!
Even if you right-click to inspect the code of an icon that is already published, you cannot see the short-code or title of the icon.
Instead there is a block in the css code, like this: data-icon=””
If your preferred icon is not on the list, use custom PNG or SVG images, get icon files from Flaticons, and then upload them to your Media Library.
https://www.flaticon.com/
Then you can either add it in an Image Module or through code. If you want it to be added in the Text Module using code you can follow these steps:
[1] Add this in the Text Module Settings > Content > Text > Text Tab, make sure to define a class in the snippet below:
[2] Add a code in your Divi > Theme Options > Custom CSS to add the icon:
.custom-class{
width: 24px !important;
height: 24px !important;
display: block;
font-size: 12px !important;
content: “” !important;
background: url(https://wordpress-1075938-4820337.cloudwaysapps.com/wp-content/uploads/hamburger.png);
background-size: contain;
background-repeat: no-repeat;
}
Ensure the class added in the HTML markup matches the class in the CSS code. Then change the background URL in the CSS code to the URL of the icon file you uploaded on your Media Library.
I really wish there was a full list of all the icons available, and all their associated search terms that work within Divi. That way I could just copy the code in to use inline with text! Font-awesome had this, it was much better.
Anyone see a cookie in there anywhere
Hi, how abbout Tiktok and the new instagram logos?
Similar to the question regarding Twitter/X, are there also plans to add the new Threads logo?
Are there plans to add the new Twitter X logo?
Hi Randy, hope you’re doing well. Just wanted to let you know that at the moment, we don’t have the new Twitter logo available on our products. The company is in the midst of a rebranding process and we are waiting for things to settle down. I’ve gone ahead and passed on your request to our development team so they can look into it. Hopefully, we’ll be able to provide you with a fresh new Twitter icon in the near future. As of now, there isn’t anything new to share just yet. Thanks for your understanding.
Hi Charry – any news on this?
Is this list of HTML entities no longer applicable?
Wow, great collection of such beautiful and enchanting icons. I was just designing a theme for my personal blog and I’m pretty sure these icon packs will come in very handy. Very useful stuff. Thanks.
Regards,
Charles
After you download the zip file. When you unzip where do you put it. I tried to put it in fonts and it says, I can’t. HELP HELP
It’s happening to me too “Sorry, you are not allowed to upload this file type.”
Please assist
Install Easy SVG Support plugin on WordPress. After that try to upload again and it will work.
Once you’ve uploaded all custom fonts you can deactivate and delete this plugin again.
I need Google + Icon for My Website. I need it Urgently.
What about the new Google Plus icon?
We need that G+
Thanks a lot guys! Great work! its very helpful for every design, making ui/ux attractive
This is really a huge set of icons. Awesome flexibility..
I just wanted to know how can I use all of these icons in a dropdown list for my posts to select from?
Really looks awesome thanks
Oh, these icons look awesome. Good replacement for FontAwesome. Thanks for making it and give it for free!
The Icons Are Really Cool, i am gonne use on my blog. thanks
Thanks a lot guys! Great work!
– To use it on your own computer: install the font and take al look at the ‘glyphs’
Wow, these are some quite beautiful sets of icons. Can’t believe you guys are offering them for free. Thanks a lot, guys!
its very helpful for every design, making ui/ux attractive
Hi. I’ve downloaded the font and put it into my FontBook to use it in Illustrator.
I can only get the first few icons. How do I use all of the icons? eg: [shift] 5
I just want a nice phone, web, fb and email icon!
Hi!
You couldn’t add Vkontakte icon? This network too is very popular )
No update in mind for new G+ icon? thanks!
very helpfull for modyfing font ..thanks for share this article
Would love to see a Strava icon. Is it possible to make a request through an official channel? Thank you!
How do I add the font to inDesign/Illustrator from only .svg and .png icon/font files? (no standard font file here from what I can see)
OMG, that’s a lot of icons. lol
I’ve bookmarked this page and come here very oftenly whenever I’d need more icons.
i am planning to use these icons on my wordpress site. That will work best with elegant themes.
These are great! I would love some icons related to fitness / health.
Regards
I am new to WordPress and what not. I have a WordPress that I am setting up and it has a setting within the WordPress that allows me to choose from your main icons and just type the icon class name such as icon_check or icon_map_alt and it will show up in the proper location. I think this is great for most cases, however I have 12 personal icons that I need to be put into some of those spots and cant find away to incorporate them into your current icon set.
I was wondering if someone could guide me on how to add those 12 font icons?
Thanks!
and this is our third site made with divi, our favourite, also with these icons, we bought the full service of eleganttheme and need all these little services like these icons, regards from graz – psychotherapie szilveszter-gloggnitzer
yes, a great collection – we use them on our website – but now we will make an redisign with divi for “paartherapie in graz” and will use more of them, good service
I would kill for a Houzz social icon.
Hi,
these are great! I would love some icons related to fitness / workout. Like a dumbbell etc.! 🙂
I keep coming in here to grab an icon for my Divi designing…just wanted to say thanks for making these available and easy to integrate into my theme.
Hi,
Can I up load my own icons somehow? The one within the theme are really cool but the are not covering all the possibility.
Thanks!
Brillan icon as always!
Thanks for your work Nick. I appreciate this share.
Behance Icon is missing, would be great if you could add that. 🙂
Thanks Nick You have Made it easy for me..
I am just impressed with the fonts and icons.. Am on it..
I am planning to use these icons on my wordpress site. That will work best with elegant themes.
Waoo amazing fonts, thanks for sharing, surely i am going to use it.
Regards
I like these fonts. Going to use these on one of my new WordPress sites.
I must say it is one of the best icon font right now.its very useful because its so much eye catching .it also increase the traffic on website.Thanks a lot.
Hello! Thank you for the set of cool icons. Could you add VK.com to social?
Thank you so much for your generosity and this amazing icons!! ❤️ them!
Awesome package. Thanks so much!
This has to be one of the best looking icons with simple colours..I think it will be good for my site to use. Thanks!!!
it’s really elegant icon for web design 🙂
awesome icons!
The ‘icon_stop_alt’ icon is bigger than the ‘arrow_triangle-right_alt’ icon. Please try the following code and you will see
css:
.icon_stop_alt,
arrow_triangle-right_alt {
font-size: 48px;
color:#6C9;
text-decoration: none !important;
cursor:pointer;
}
html:
Jquery:
$(‘.icon_stop_alt’).click(function(){
$(this).removeClass(‘icon_stop_alt’).addClass(‘arrow_triangle-right_alt’);
});
maybe a bug?
Ok, I found the bug!
Please open : ‘arrow_triangle-right_alt.svg’ in illustrator, you will see that the icon is not align to the center…Maybe other icons have the same issue (not tested)
thank you very much! Your icon text are nice. Can you tell us more about the image folder in the package download file ? It is just for the svg file ? Because I saw some png file in it…
Awesome Icons Bro. But can anyone tell me how i use this icons on photoshop?
Thank you!! you are very excellent designer!
Nice fonts! I will use these on my WordPress site!
Thank you 🙂
Just what I needed. Thank for posting this.
I second the request for Github! and add a request for Codepen.
Hello guys!
Thank you for the awesome font! I was wondering though how can I use it in Photoshop? Where do I get the characters to copy paste to PS? 🙂
Thank you again!
Beautiful fonts! Can’t wait to use them for my new site. Thanks for the share!
Can someone create a plugin to add in FontAwesome to this? There are several critical icons missing. #deal-breaker. Or, can the devs maybe have a checkbox/dropdown somewhere that enables FontAwesome? That would be awesome.
I just love those blue fine-line icons. Used it in two projects until now. Thanks for sharing this.
Thanks for sharing for the free. It means a lot. I have used a few for my website. Respect.
On Divi Theme, how can one add an additional social icon, like say ‘Apple’ social icon?
How can one add an additional social icon not existing in your theme to the list, like ‘Apple’ social icon?
This font is great! We’re using these chars for the social media icons on our site and they look super. We’d like to submit a request to add characters for Razoo (www.razoo.com) and Amazon. Thanks!!
All icons are really awesome! I have started using them in my websites. I am pretty sure that now my website will be more Elegant with these.
Thanks!
Nice collection, I will definitely used one of those icons for my own WordPress template…
Gorgeous collection for icon/font.
This is just what I need.
Thank you.
Gorgeous fonts! I’m going to use these on my website!
Thank you 🙂
Hi,
You mean i can download csh file and import to Custom Shape . And use them as shape tools. Right ? But when i download them, i don’t see csh file. Help me !. Thanks !
WOW. Really awesome collection for icon/font. Appreciate that 🙂
Thanks a Ton. those uni-codes are pretty awesome
Hi Nick! I’m getting great results with these icons! Thank you!!
I’ve been looking for these icons for my website. Thanks for your great collections!
I like these modern, flat icons very much. However, I find that they stand out just a little to much. What would be an easy way to convert the black in a dark grey?
I haven’t read the legalese yet but is it allowed to include these icons in an app? Or are they only free for personal use?
I use the Elegant Themes in many of my sites for the last two years. I found these icons today. I am sure they will make my sites even more elegant and my content more easily readable.
Thanks a lot for your hard work!I love these awesome Icon so much.
Nick, you guys published some awesome icons. I love the flat set as well.
Hi Nick
Thanks for sharing this, the icons are awesome! I’m a regular user of FontAwesome but they do become a bit samey across projects, so it’s great to have another free set to try out.
Great work!
I have some issues with some fonts like:
icon_printer-alt or icon_document
They don’t appear on my page but the others like: icon_phone work well!
I have installed this plugin but I think it doesn’t support all icon fonts! ??
https://wordpress.org/plugins/elegant-themes-icons/
Any idea?
I’m having the same issue with icon_printer not working, but icon_email does.
Thanks a lot for your fabulous work 🙂
i can’t see icon for call/phone etc? am i blind…? what you suggest to use for that?
sorry-sorry, it’s there – icon_phone 😉
OMG! What a Freakin awesome collectoon of Font icons, There are gonno make my website more attractive.
Thanks for Sharing Elegant Themes, As always we love your work.
The web social icon such as the ones for twitter are pretty cool and very helpful. Thank you for the hard work.
Excuse my ignorance, but how do I add them to Divi?
Great icon pack!! Please consider adding an icon for “fax” — I know fax machines are ancient technology, but corporations still use them for legal reasons.
Here’s an example from the fontawesome icon set http://bit.ly/1sHqc2I
Awesome. Thank you for this one. Ill sure gonna check this out 😉
Lovely Icons… These icons must be used in web applications and web designs, I used few icons for my android apps, those are looking very professional now. Thanks you so much for such a wonderful article & given good knowledge on different kind of icons.
This is a great collection and hard to believe it’s all for free :o)
Thanks Nick
PS. At the risk of sounding really greedy, are there any plans to add a few more icons?
Runs for cover ….
WAw… this is so great .I was Just about to make last adjustments to my site and I needed kind of icons.
Thanks a lot.
nice i need this icons pack thanks man and sites
hmmm great set of icons . these icon can use for commercially?
Just what I needed. Thank you
Thanks for these! I really needed them!
Thank you! Are you guys planning to add a filled in circle icon? That would be great!
This is just what I need …. What an amazing Icon
Thank You for sharing
great icon i really like you thanks for sharing it it s great work
I would love to try some of these icons on my site.
Fantastic icon fonts!
Hi,
These are awesome icons but I’m struggling to find a way how to use these on Photoshop, because I design PSD templates. There’s a way how “font Awesome” can be used in Photoshop, ther a PDF cheatsheet for that.
Can anyone provide me a similar solution please!
Thanks!
Me too!
Great icon fonts.
Thank you very much
Wow! Thanks for sharing this, the icons are terrific! I’m a regular user of FontAwesome but they do become a bit samey across projects, so it’s great to have another free set to try out.
Just downloaded this set of icons 🙂 Thanks! Now I can replace some of my image icons with this neat set.
I downloaded, thank you very much 🙂 I’ll share it on my facebook page.
Regards
Amazing icons for my needs.
As an occasional ellegant theme subscriber I could not expect anything less than a high quality work from you. Thank you for sharing.
Just downloaded, thanks 🙂 I’ll share it with my facebook group also 🙂
Thank you for sharing icons
This is awesome …. Thank you for sharing these fabulous icon 😀
Very useful post, thanks for sharing this Free Icons and Unicode Reference Guide.
I’d like to request a Github icon pretty please?
GitHub icon FTW, please consider adding this. I really want to incude a GitHub icon on my page footer but it’s a PITA to add manually editing code.
Need Keyboard key to type the icon in Photoshop pls help
First off I have always been a fan of your WP themes and tossing these cool icons in is awesome! Thanks!
Great Post! Thank you for sharing. This is really helpful when on tight time and budget! I am more of a developer than designer and collection of icons makes my life easier – without hiring a designer. This is the second greatest thing css provides (second to sprites ;D)
Hi Nick
Thanks for sharing this, the icons are awesome! I’m a regular user of FontAwesome but they do become a bit samey across projects, so it’s great to have another free set to try out.
Great work!
Its simplified now with the plugin by ET moderator Mayur.
Check it out at https://wordpress.org/plugins/elegant-themes-icons/
Makes job so much easier. Thanks.
great icons set.exactly what i needed for my site
You’ve done a great job with these icons! Thank you 🙂
This is what I was looking for a long time. Thanks guys.
Wow! Great Icons. I can’t believe that. I must use this icons. Thanks
I am obsessed with line art icons. I should brush up on my Adobe Illustrator skills and make some of my own. Flat icons are fun to use, too. I like anything colorful. Great set, thanks!
Thats great. I love it 🙂
This is a great freebie, I still cannot believe this is a free font … Awesome work Nick! I’ll surely use it on my website…
Folks, I just love these icons!!! Hopefully will make my website more attractive to my visitors!!!
I love it!
Hey
Do you have any idea why I see normal font glyphs (*&^%, letters and numbers instead of icons) and squares instead of icons after ?
Cheers
Awesome Work…
I wanna ask one thing that how could i use them in my PSD file ? can i know the code of them ? i have used my keyboard keys but it very less than 360…. some icon i got but not the whole…. please do tell me
Thanks…..
Thank for arsive 🙂
How Can We use the Unicodes? 🙁
Is just put in HTML Text Module?
Use these icons all the time. They’re amazing.
You would save me so much time, if you could put the class names beside the first set of icons
I use the web inspector to copy and paste the “data-icon” text into photoshop and fireworks. But there’s so many of them to go through each time.
If the class names were underneath, I could search for “calendar” and copy as usual. Instead of having to scan them every time.
Thanks
Thanks a lot Mr. Rory
Now I can use this font in photoshop to follow your technique.
How in the world I’m gonna use the set in photoshop? I’ve seen that in the past the question had been raised for a few times, but no one could possibly answer those correctly. So can anyone please tell me that how to use the icons in photoshop?
Shuvo:
Download the font package, unzip the folder, right click “Install”, then open photoshop. The font will be in your list of available fonts. If photoshop is open when you download the font, you may need to close and then re-open it.
Hope this helps.
Wow, this is huge list, thanks for giving all the icons on one page…
Hello
How to use this icon in photoshop? Could you please tell me anyone?
Brilliant stuff! Quite the comprehensive collection you’ve produced. 🙂
Being a small designer, these icons are most creative for me and thanks for this post. Before this post it takes lots of time to create the icons in PS for me but here are lots of icons for a designer like me to create on canvas, thanks again!
Where is the opposite quotation mark? there doesn’t seem to be a glyph of the opening one, only the closing one….??
Add style=”transform: scale(-1, 1);”
It would be great to get a YELP icon set in here as well!!!
Same here – would love to see Yelp included in this icon set!
Please add the Yelp icon to the set. It is going to be much used by folks who have a local business presence.
Also consider making an Angie’s List icon for the same reason
Yelp is a no brainer. Restaurant, salon, etc… they will all wish to link to their yelp reviews.
Yes!! I would love to see this added.
wow!!!!! Thank you!! you are very excellent designer!
Wow, I might just try these ones!!!
Wow! O(∩_∩)O~I have to say that your share is very wonderful! \(^o^)/~Thank you for your share!
Can these fonts be used in corel draw? if yes is there a tutorial available for installing them so that I can pass the fonts and tut to my Designer.
Really these cool icon fonts look aweful. I am used in my wp theme…Thanks!
Hi, thanks a lot.
Can you add Flattr social icon ?
(http://flattr.com)
I was looking for font icons, would you add some gaming icons. Thanks.
Thank you for this. Are you considering in adding e-commerce icons, such as visa, maestro, mastercard, american express, diners etc too?
WWow! Thanks for sharing. I very like it. Amazingggg!!
This font looks good only in 32px size. How can I resize it to 24 without losing quality? anyway? any method?
Amazing work thank you !
Love this font set!
Is there a way I can use the whole set in :before/:after in css?
Doing this works: . a:before{content: “a”;}
But this doesn’t work: .a:before{content: “”}
Or, to make a long question short: can I use the unicode values in css pseudo selectors?
Thanks!
Awesome!!! another piece of perfection. Thanks sharing!!!
Here is a step by step tutorial of how to install and edit these icon fonts:
Elegant Themes Icon Font Tutorial
I have successfully uploaded and managed to figure out how to use them in my wordpress – but how do I edit them please? like if I want an icon blue nor black.
Nick, you can use an external style sheet or inline code to edit the font icons. I prefer the inline method, as it’s easier to manage each font.
This is how I did it. I used p style to start the code, and then changed the font size to 32px, and changed the color to black =
Of course you need to change the ”!” after data icon to the icon you are using. For a detailed step by step see here –
http://www.seojus.com/elegant-icon-font-tutorial/
Wow Gr8 icon’s 🙂 Thank you Nick 🙂
Thanks Nick, it helps a lot.
Thanks again!
This is great!
Why not include the font with a shortcode into the ET themes?
Hi, I am new to all of this, I am building my own wireframe and added these wonderful icon fonts, they work in ie8, ie9, ipod touch 4th gen, google nexus 7, firefox but not in ie10 windows 8 or windows 8 mobile.
Any ideas.
Here is the site they are on http://www.wayneharbar.pwp.blueyonder.co.uk/index.html
Thanks, Wayne
wonderful icons. Elegan Icons looks Awsome. ET team done wonderful job.
Thank you very much!
thanks a lot. i like it.
Love these! Any plans to add them to the ET shortcode plugin? That would definitely make them easier to use.
awesome!!! Thanks!!
Wow folks, awesome icon set indeed!!!
These are freakin’ awesome!!! Thanks!!
Folks, I just love these icons!!! Hopefully will make my website more attractive to my visitors!!!
amazing collection of icons! thanks!
Looks cool. I am a little surprised that elegant themes would offer this up to its users without some kind of instructions or guide. Maybe one day I will take the time to google it.
Awsome . Such a big present for the end of vacation . Needn’t have to create my owns.
Thanks
Thank you very much Nick, they are great!
great! just wondering how do we install this to use on the site? has anyone got an easy tutorial
The Elegant Icon fonts are really appreciated. They look great.
But that makes it even worse, when you are too “stupid” to use them correctly. Having something really nice just in front of you, but not being able to use/eat/taste it, is just cruel.
And it seems a lot of Elegantthemes users do not know how to use them. And so far I have not found a useful description. Please, provide a description on how to use them for your themes.
Kind regards,
Florian
Great icon package for web design. Thanks Nick
This option set is awesome. I just set up another site using the Nexus theme and i’m gonna have to play around and see where I can use some of these.
Thanks!
Amazing collection of icons! Thanks!
Fantastic, exactly what I was looking for; this is a really generous share, thanks Nick.
This is awesome! Great icons and work! Thanks for sharing.
These are so great! Thank you for doing this.
Big THANKS for your generosity, Very much appreciated Nick
Very nice, thanks for the hard work
Wow, this collection is huge. What a great find!
Very Nice icon and helpful for all. Thanks for sharing
What an amazing icon collection! Thanks for sharing
Well – ELEGANT THEMES does it again!
Top Quality is your trade mark! Well done and thanks for these icons.
im sorry but this newbie doesn’t understand how i can put these into my website im using the new nexus theme, does that mean i got to figure out and css padding etc . cos i dont know much about it.can you please advise me, ty.
This is a great freebie, I still cannot believe this is a free font … Awesome work Nick! I’ll surely use it on my website 🙂
Thanks for this awesome icon font, it would be better for a lot of people i think you made a tuto to explain how to integrate it in wordpress.
Because at this point im don’t know at all how to integrate it correctly in wordpress, so it is a good work but it is not ready to use for a lot of your customers like me…
Thank you for this great gift… Appreciate it very much!
Really nice fonts. Thanks!
You guys are like crack.
Your themes are beautiful and great to use, and then you give out these great presents, just for using your themes!
Elegant_font, elegant_builder, icons and short codes! Thanks! You know how to spoil your customers.
Great collection! Thanks a lot.
Thanks so much for these! Really needed them!
Great icons! Thanks for sharing!
I wrote a couple of blog posts on how these can be used in WordPress.
http://sridharkatakam.com/how-to-use-elegant-icon-fonts-for-social-media-icons/
http://sridharkatakam.com/how-to-add-icons-to-left-of-widget-titles-in-wordpress/
Hope others find them useful.
Thank you for providing this service!
You’re charging for this tutorial. You failed to mention that when promoting yourself.
Sorry for the inconvenience.
My site was free for a long time during and after I posted my earlier comment.
Anyway, I went ahead and made those two free for all.
Font novice here. Is it possible to use these icons as a font on a Mac (like Zapf Dingbats)?
I was thinking this was like a Google font, which I have also uploaded to my Mac’s font manager so I can use them in all my graphics programs, not just my websites. ElegantFonts is now loaded up in Font Book, but only about 50 basic arrows, bullets, list icons show up, not nearly the full array of graphic icons shown on this page. I’ve tried every keyboard combo imaginable. (I chose the HTML CSS folder>Fonts>ElegantIcons.tff to upload–maybe I need a different file?) Thanks for any help.
I have made and attached what is hopefully an ‘easy’ solution to this question. This is how I have been doing it, and have had no problems thus far.
Tutorial Here
For more details, including instructions of Windows, go here
Hope this helps!
Spectacular! Thank you!!
Love it so much. I was looking for some decent icons just yesterday. It’s so nice to have these available for use.
Wonderful! Thanks Nick!
This was one of my big requests a few times in a row any time you asked, as I’m sure many other’s as well. Not that I mind embedding my own icons or find it difficult. But something like this saves such a huge amount of time in building a website. Most icons used are pretty much stock anyhow, and I’ve found it relatively rare that I really have to ‘custom’ design one.
Thanks again.
These are fresh and many icons here are preferable to other symbols seen elsewhere. I’m glad we now have this alternative to Font Awesome here — which is cool, but very common and some of their icons don’t work (e.g. their calendar looks like a gift package).
Nick, you and your team are very good to us, offering up a lot of HARD detailed work here for free. (That said, I hope we see this set expand over time. Icons for healthcare, education, and transportation are very helpful.)
Great work!
Great job.
Thank you for this freebie
Though to be sincere, your themes are so elegant and so well balanced that I don’t even dare to change a little icon that could jeopardize such well designed pages.
It is so easy to jump into fancy stuff and mess up everything that I am afraid of loosing the so well ‘surfer oriented design’, for which I must congratulate your designers.
Jose
Really great, thanks for sharing something new and beneficial for customers, is an example and a good way to retain them. Thank you.
http://www.elegantthemes.com/icons/elegant_font.zip
Sweet! Thanks!
Great stuff – thanks for sharing!
Thanks for offering great work
Nice icons! Will use. Thax
Awesome (oops – no reference intended) !
But seriously – really cool.
I need a target with an arrow going through it.
THAT would be “elegantly awesome”. Any chance?
Good job guys
icon_target
Just a quick note, i got this via my e-mail subscription and the download button on the e-mail goes to http://icons/elegant_font.zip
Great icons! One thing…in the email you sent out announcing them, you forgot the elegantthemes.com prefix for the download link.
Bravo Nick!
I’ve been a member since your first year (or close to it anyway) and this is just another treat!
I found the following article which makes the process a bit clearer:
http://gomakethings.com/icon-fonts/
Seems that Nick has alrady generated files using comoon
Seems you need to upload the ‘font folder’ into same directory as CCS file ( but never used an FPT client before – so maybe you can do this from cpanel?)
Seems you then open the style file and copy this into CSS ( which tells the style sheet where to find the font folder? I think?)
Then I get lost….
Glad I’m not the only one lost!
I’ll keep checking back for a comment “Icon Fonts for Dummies” 🙂
Thanks Nick, can’t wait to use them once I figure out how!
Glad I’m not the only one lost! Bookmarking this to come back and check for someone posting “Icon Fonts for Dummies”. 🙂
Can’t wait to use them Nick…once I figure out how!
Thanks for everything ET does!
This is awesome! Great icons and work! Thanks for sharing.
Thanks a lot! 🙂
im not sure if get i after reading those links. do we import as zip file in wp then enter the valves where we want the image to be displayed not sure what u mean by this one.
Great stuff! Thanks for sharing. Is there a way to get social icons and rss only?
Cheers!
Fabulous icons…very helpful to developers…
Thanks Nick, I’ve been locking my head on how to do this seeing them on most of your latest themes.
I’d like to request icons for file borswing!* Go up one folder -icon.* Directory icon* (Text) file iconPersonally, I would love if the directory icons / file icons were 32 32 and the go up one folder were slightly larger (64 64?) but I’m shit with this stuff so you probably know better what sizes suits the purpose!
Thanks! :o)
Awesome stuff guys, thanks!
Fantastic – Thanks!
how do you use them? is it a plugin?
No it is not a plugin. The icons are a font file that you can embed into your website via CSS. The icons can then be used like normal characters and styled using CSS.
Ok, I have never done anything like this before and I thought I was quite good with WP. Do I copy the Stylesheet data into the Epanel C
SS? If so then what or is that it?
You can find more details here: http://icomoon.io/#docs/font-face
Tried to follow this and spent a while looking up YouTube etc.. But it assumes too much existing knowledge. Anything easier e.g. adding custom fonts to wordpress for idiots?
Wow! this is excellent. Now I can replace images with these icons.
This is really great collection! Thank you guys! I would like to know if they can be used in inline css, so in content box area?
These are pretty neat. It seems by the main image that they can be any color. How do you change the color of them other then changing the vector image itself? Am I missing something?
They are fonts, and they can be styled using CSS just like you would adjust the size or color of a normal letter.
Thanks a lot, I have been looking for something like this. Very usefull!!!
Thanks guys, these look great!
Perhaps ET fans could submit their own icons to broaden the collection?
Those icon fonts look awesome and sharp. How about a plugin for this icon font?
Please see this: https://wordpress.org/plugins/elegant-themes-icons/
THANK YOU!!!
I looked at this and it hasn’t been updated in 2 years and not compatible with current WP version.
JUST GO FOR IT !
I’ve installed it and It works perfectly with my updated wordpress & divi theme.
The only way I’ve found to overwrite the default google fonts (@font-face didn’t work for me with Divi).
I’ve been a fan and a client of Elegant Themes for about 2 years now. You guys rock. This is a great addition to the themes, and I can’t wait to use this on my projects. Thanks!
Very nice. Thank you.
That’s an awesome work. Such done fantastic job. The icons is very useful for any projects and make adjustment very fast. Such a great job.
Download the icons link not work!!! redirect to homepage
Very nice. I like free stuff.
Thanks for the Elegant Icon Font. Can it be used in commercial projects too? I tried to download it, but the link doesnt seems to be working…
There are no restrictions as to how they can be used. Try refreshing the page, the download link should be working now.
I just wanted to say that elegant themes is an awesome company to deal with! I have never had better customer service / support from any company as I have with Elegant Themes. Keep up the good job! – Adam
any way to add into Divi?
What an amazing gift after completing 200,000+ users!
Thanks you so much, Nick 🙂
Will surely, give them a try on my upcoming site.
Perfect one. such freebie helps developers so much.
Thanks for creating it.
Awesome!
Wauw… this is so great and very welcome. Just about to make last adjustments to my site and I needed BA-DAA icons.
Thanks a lot.
/ Dennis
I must say that these icon fonts are eye-candy. They just make you want to click on them – this psychological aspect alone can make a big difference in generating traffic for your website!
Very true! Exactly what I was going to say.