If you are looking for a good Design program and don’t want Adobes monthly CC plan or Illustrator.
Take a look at the absolutely fantastic Affinity Designer.
A member of the Affinity forum has shared a HUGE icon pack containing these 11 icon sets: Entypo+, FontAwesome, Foundation, Game Icons, Gnome Symbolic Icons, Hawcons, Icomoon, Ionic Icons, Material Design Icons, Material Icons, Typicons.
Each containing 300 - 700 searchable icons ready to use direct in Affinity Designer.
It seems Affinity has some price drop during the Apple WWDC so the price is very nice right now.
@pauland Yes i’m waiting for Affinity Publisher as well.
I’m sure it’s going to be great when it’s done.
From what i’ve heard developing Publisher took longer than they’d expected and they don’t want to release even a beta until it’s good enough.
Meanwhile Designer has got some needed updates.
Like the Studio Assets, Symbols and Text Styles and more.
Thank you so much for this @Jakerlund! I’ve been using Affinity Designer for a while now and along with migrating to Pixelmator Pro, have been able to be done with Adobe products. Affinity does a great job of simplifying a powerful tool set. Best of class in my opinion.
You just export hem as svg or png’s.
I prefer svg’s they work great in the image block, just add a class to adjust size and position.
You can’t change color of the svg/png inside blocs though, it will behave just like any other image.
But with the new “Inlince SVG” brick in the Blocs Store
You can paste the svg code from Affinity designer.
You have to go through a code editor like Sublime Text, Brackets, Atom or other to edit the code before pasting it into the “Inline SVG” brick.
In Affinity Designer, copy the icon. (keep it simple without layers)
Yup, i realized that after i had posted, and read the whole post.
So i took a few minutes to take new screenshots to explain what he actually was asking.
It’s 04:40 in the morning here and it’s bed time, my brain is on shut down mode
That link is dead. Here’s the forum post where the link can be found.
I also cannot for the life of me find a way to copy only the CODE of a selected SVG icon in Affinity Designer 1.7.3 (I am running MacOS High Sierra). That remains true even if I open the General Preferences and checkmark “Copied items as SVG.” The SVG graphic gets copied, but I want to copy the code so as to follow your step-by-step method. I just don’t know how to accomplish copying the code.
I really wish it was easier to just insert a single font from Font Awesome in an existing line of text in my Blocs website without having to resort to SVGs or HTML Widgets. The Inline SVG solution, assuming I can ever figure out how to copy/edit the SVG code, is only a workaround for this problem. I do see it as a problem because again, it should be much easier to accomplish than what is required now.
Here’s an example. I am typing out a paragraph of text in Blocs. I’ve got all my links setup and Classes applied. It took me 30 minutes to get it how I like it. Now, I see I would like to insert the Twitter bird icon next to the word Twitter in that block of text. Sadly, I can’t. I then see I’d like to insert another icon font, but I can’t do that either. Rebuilding my work as an HTML Widget is a big bother – no thanks. So I give up. Later, I end up doing the same thing. The depressing cycle repeats. In the end, I never get the icons I want “inline” with my text. I’m really frustrated by this. REALLY!
I want it to be as easy as pasting an Emoji. Go here and copy that “gift” emoji. Switch to your Blocs document, insert your text cursor inside any line of text and Paste. Boom! There it is! That’s precisely what I want to do with the Twitter bird icon or any other Font Awesome font. It’s ridiculous that it isn’t already THAT easy. It should be that easy. If only more of these Font Awesome icons were emoji, my point would then become moot and I could get some real work done!
Exporting is yet another step we can add to the list. Everything else I wrote in my previous post remains true. There are WAY too many hoops to jump through for something that needs to be as simple as pasting an emoji. It’s much too fiddly and troublesome to put multiple font awesome icons inline with existing text in Blocs right now, for reasons I’ve already stated in my previous post.
For example, if I sent you a Blocs document with a single paragraph bloc of text, all formatted the way I like it, and if I told you to insert 5 different Font Awesome icons inline within that text IN 60 SECONDS, could you do it? No, you could not. But if I asked the same with emoji, you could. That’s really my point. Emoji is copy/paste/done. That’s what I, you and every other Blocs user out there would love to see happen. You know you’d like it just as much as me!
Opening Affinity, putting the icon on the page, exporting, opening the SVG in a text editor, editing the text, copying the text, pasting into the field for Inline SVG in Blocs, then figuring out how exactly to use that INLINE with an existing bloc of text – it’s all too much of a people for most people to even try!
To be fair I was replying to your first bit, where you said you couldn’t for the life of you figure out how to do it. And I made a suggestion.
To the best of my understanding, Emoji uses Unicode, they are a font, Font Awesome, despite the name is not a font. The Text bric basically just places open and closing tags around basic text. eg <p> my text </p> and allows you to add spans.
Font Awesome would use something like this <i class="fa fa-clock"></i>
Yes, I would use the code bric. (don’t me).
So basically what you need to do a wish list request is for feature rich WYSIWYG Bric. maybe? Or for the text bric to have some more options such as inserting elements.
me).