Hello all,
I was wondering whether there is any way to include bootstap icons or similar like Font Awesome.
Thank you!
In relation to this, the icons which are already on some of the templates. I would like to change, is there a downloadable pack containing them all which I can then upload to replace the ones I don’t need?
@alex We want to add icon fonts for sure! Right now there is no way to add icons based on fonts but you can upload images like JPG, GIF, PNG or vector images like SVGs.
@JordanC26 You can easily replace the icons (sometimes they are PNG or SVG format) by double clicking on an image and replacing it with one you create or downloaded online.
1 Like
Replacing the image I have no problem with, very easy process lol.
I mean if there is 6 icons, I like 3 of them but would like to change the other 3, then it’s best to use 3 new icons from the same set/style. The template I used on Webflow already has a few icons but 2 I would like to change, I don’t have those styled icons downloaded as they are just already there on the template.
Ok I see what you mean Jordan! I’m assuming you’re looking at Gallio template and want to replace some of those. The icons I used are from http://www.entypo.com/. It’s a great, free, icon set. You will have to download the set and recreate those icons. It would probably be best to do all 6 so its consistent.
In whatever software you are using to export your files I recommend slicing up the images so they are all the same height and width with the icon centered inside. This will make it a lot easier to style (you won’t have to have different padding values for each icon because each icon would have different heights - in this case they are all the same height so one consistent padding value would do!)
Like so:
Does this help?
2 Likes
Perfect! Yep that’s what I was looking for.
Thanks for the info. I guess you designed that template then, fantastic job there I love working on it!
1 Like
I use font-awesome on almost every website I build, its almost become second nature and I know a lot of elements by memory. Its really easy to integrate into an exported site but it would be nice to have access to icon/font libraries like font-awesome when putting together the presentation and design of a site using webflow. This really is a designers tool that will make webflow all the more feature rich with inclusion.
8 Likes
I want to second pingram3541. This capability would help show clients/coworkers an even more visual representation of the project during development. Please, make adding this capability a top priority!
1 Like
Totally guys. We want to add type icons like font-awesome to the tool soon. Hold tight!
5 Likes
has there been any update on this?
Is there any update on this very important subject ?
hey thesergie, will there be any kind of icon integration soon?
Sorry guys! My estimation of “soon” was way off base. We put this feature on the back-burner for the time being as we build out the core of Webflow. But it is on our roadmap! A way to add the icons is adding a custom icon font in Fonts tab in the site settings. Thanks for your patience guys!
2 Likes
The original question was if Bootstrap or Font Awesome Icons could be integrated. Can’t Font Awesome just be loaded up in the header? Pretty sure I tested that out on a site and it worked fine.
The way to get the FontAwesome Icons into Webflow, is as Sergie said, install the Fontawsome.otf or ttf file through the Font section of the dashboard.
Then, in design mode, check to see that the FontAwesome is loaded in the Fonts panel.
Then, go to the FontAwesome Cheatsheet, copy the full name and code of the icon you want. Eg: fa-building [ď†]
In webflow, paste it whereever you want. Then select Fontawesome as your typeface, and voila, the icon will be populated inside the [square brackets]. Delete the rest of the text and style the icon as you please.
4 Likes
I would suggest you use the FontAwesome CDN:-
https://fontawesomecdn.com
https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css
Unfortunately the new API .css file seems to get blocked, but the above works a treat
1 Like
Hey guys I was able to add fontawesome Icons in my webflow site by following undermentioned steps:
-
Paste the following code into the Code Tab of Site Settings
<link href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" rel="stylesheet"> -
Add following code in the HTML Code
<embed/>block,
<i class="fa fa-database fa-lg"></i> -
To see the changes take place you need to publish your site e.g. mysite.webflow.io
Note: Icons doesn’t appear in the preview mode but they appear when site or page is published.
I hope this helps everyone.
4 Likes