Font Awesome and Icon Font Support

I'm excited to announce the launch of one of our most popularly requested features - Font Awesome icons and icon font support! Start off with Font Awesome right out of the box with no extra work or use an icon font you purchased. Drag and drop them anywhere on the page, even inside paragraphs and buttons. Read on to learn more!

Using Icon Fonts in Divshot

Double-click any editable component such as a paragraph. You'll notice a star icon on the right of the text formatting menu. Click the star and you'll get a popover with a list of icons. If no icon set is currently referenced in your HTML file, you'll start off with the Font Awesome icon set.

What's really cool is that Divshot supports any icon set. Purchase your own from somewhere like Symbolset? Simply upload the font files and CSS. Drag over the CSS file from the navigator to the canvas.

Now open the icons popover again and you'll see all of your custom icons. It's that simple. Divshot automagically scans your page for icon fonts and figures out which one you're using. 50% of the time it works all of the time, but if it doesn't get in touch and we'll add support for your font right away!

When you click an icon it's inserted at the cursor in your editable component.

An icon is a component in Divshot. But it doesn't behave like any normal component. It's an inline component so you can drag it inside paragraphs, buttons and more. Simply drag the icon over a paragraph and you'll be able to place it before or after any word. This gives you extra fine control over the position of icons.

Font Awesome Awesomeness

In addition to supporting any icon font out there, we went above and beyond for Font Awesome. When selecting a Font Awesome icon in Divshot you'll be able to use the inspector to change any of the following:

• Size: icon-large, icon-2x, icon-3x, icon-4x
• Alignment: pull-left, pull-right
• Rotation: icon-rotate-90, icon-rotate-180, icon-rotate-270
• Flipped: icon-flip-horizontal, icon-flip-vertical
• Border: icon-border
• Animation: icon-spin

We <3 Your Feedback

Icon fonts happened because you guys asked for it! We're always on the lookout for ways to improve your experience with Divshot. If there's something you really want we're all ears. More to come soon.