[00:00:00] Welcome to Podcast. Awesome. Where we talk about icons, design, tech, business, and nerdery with members of the Font Awesome team. I'm your host, Matt Johnson, and today we are talking with none other than Mike Wilkerson. My very first. Podcast guest actually, and I'm recalling the time that we recorded this down in my basement and we had to time our conversations in between the clicks of the furnace so that it didn't make it into the recording.

And we're bringing it full circle now to talk about the newest version of the fun awesome WordPress plugin from inline SVGs to conflict wrangling and self-hosting dreams coming true. This update's kind of a big deal. So whether you're deep in the block editor life, or navigating a jungle of page builders, you're gonna want to hear this one.

So, Mike Wilkerson, I have to thank you, um, for being my first victim on podcast. Awesome. Was that, um, yeah. Yeah. So even though your podcast didn't come out as the first episode. Yeah, that was the first recording we did. Oh. And I didn't really know what I was doing at all. I don't know if, if I, I'm not even sure if I know what I'm doing now, but, but back then, um, you had a little bit of podcast experience mm-hmm.

And we kind of cobbled it together. Mm-hmm. Did that recording down in my basement. Um, in between the, uh, the furnace clicking off and on. Oh, right. Yeah. I do remember that. Yeah. Mm-hmm. Furnace brings it all back. Yep. Yep. So that, uh, that episode. Help me learn how to, to edit. Awesome. So I just wanna thank you.

You made something awesome. Thank you. Appreciate it. [00:02:00] Well, exciting stuff is happening right now. Like you've been in the world of WordPress and we've had conversations over the last couple years where, um, you're saying I really want to highlight some of the WordPress stuff that we're doing. I mean, so many folks are, use WordPress, I mean.

Do you have a sense of like, how many folks are building sites with WordPress or how widespread it is? I don't, I don't have any, uh, up to date numbers, but some years ago when I did some, uh, close enough analysis, I, I found that basically among our customers, it's about the same as what's on the internet.

So yeah, if they say, you know, 30 something percent of the internet uses WordPress, well that's, you know, that's about how many of the fun, awesome users are using WordPress. So those numbers held true. Some years ago when I did some analysis. Yeah. Probably about the same today. Yeah. It's a lot of people in the world of, of, of WordPress.

There's developers that will just sort of, they see a need for a tool and they, they build something. There's WordPress plugins and things like out out there that are, um, using, they use. Font awesome icons. This one's like official though, 'cause you built it, right? Yeah. Yes. There are, I would say two categories of, um, others making plugins and themes that integrate with font.

Awesome. There are other open source projects that are doing that, but there are also some premium vendors of page builders, uh, that value integrating phau, uh, into their page builders so you can use it when you build pages with their, their stuff. Um, they may or may not integrate with FAU Pro, however, and then when they integrate with FAU Pro, they may or may not support all the features, latest icons and those things.

So there is a range of different ways that people end up using Font Awesome on WordPress. So our, our official plugin is trying to provide a great default. Way to use it. Mm-hmm. Um, or if you're in a very [00:04:00] common situation where you've got one or two or three other plugins or themes that are kinda loading their own version of phone.

Awesome. Our plugin also helps to try to wrangle that and. Uh, deal with some of the conflicts so that you still get the icons you want. Particularly if you get pro, you wanna make sure you're pro icons are working on your WordPress site. It helps to kind of get through that complexity. So you kind of just get the icons on the page that you want to be there.

Even if you're using various other plugins that kind of each try to do it their own way. Right. It helps to consolidate that. So you can use your pro kit, for example. Mm-hmm. And you had built a plugin in the last few years. I want to say that was pretty functional, but. It sounds like this is something you've always wanted to get to that you're excited about.

This version of the plugin. What is it that you added to a previous version that kind of makes it more robust? Yeah, so version five of, of the funnel, some official WordPress plugin. Uh, the main thing it adds is visual editing in the WordPress block editor, AKA Gutenberg. Uh, you could add icons in the block editor before, but.

They always showed up as just WordPress short codes, which means the square bracket, you know, icon name equals, and then you could tell it to prefix if you wanted a different style than when you would save your. Uh, content in the block editor, you would just see square bracket, icon, whatever. You wouldn't see an icon.

So that makes it harder to visually design your page. And FENOs was very much about, you know, enhancing the visual, your visual designs. And so, you know, that's a frustrating, that's like a partial experience and it always was partial. Yeah. But, you know, um, to, to think back to something Dave said on the podcast recently, uh, ship early enough, while you're still kind of embarrassed about it, that right.

But that was like five, six years ago. So it's, this was, this was longer than I expected, but, um, what version five ads then is just pretty much what you would expect. You know, you add a, an icon to a page and you see the icon on the [00:06:00] page, right? You can style it, size it, rotate it, add the animations, color it, all of those things.

And you're seeing in the editor, you know. It's called, what you see is what you get. Wissy wig. Mm-hmm. Um, that's what you see in the editor. Now, by default, when you're using the WordPress block editor, there are umpteen editors out there. The different, you know. Uh, that people use different ones. So you don't get that in any editor.

That's an integration for the WordPress block editor, though, which is the default, I think, for most people. Mm-hmm. So that's the, that's the big change. And there's some technical changes for how it works under the hood that also has some other, uh, implications. But that's the main one that just sits you right outta the box, is the default way of using it.

 So what are some of the implications for how it can be used on. Uh, the way that the new visual, um, editing support works is that it is just injecting SVG elements right into the post content. Uh, so there are several different payouts with that. Several, several benefits. One of them is that we've often had requests from some customers to be able to self-host.

Font Awesome on their WordPress sites. This does not offer full self-hosting, but because the SVGs, the main, you know, icon content is just stored right there in your WordPress database, that's effectively what you get. You know, you don't have to load stuff from our kit, [00:08:00] CDN for the icons themselves because the icons are stored right in line, SVGs, right in your, uh, right in the, the post content.

Um, there is some supporting styles. There's a supporting style sheet for styling the SVGs. Um, and that too is actually by default, um, being fetched to your server and being self-hosted. So for those who've been wanting that, and different people have different reasons why they'd prefer, uh, that their pages load without using our kit, CDM to get the icons, um, you know, that's now like the default way that they would load one of the other.

Implications of, of, of how that works is that, um, it's a, I mentioned before that, uh, different plugins will try to load their own version of Font Awesome and, and they can create conflicts. And you know why? Then, then you try to put your pro kit in there. You're trying to see your pro icons in the page, but only these free ones from FAU five show up.

And why is that? And often it's because you've got some other plugin that is kind of taking priority and, and having its conflicting version of FAU being the active one. And it can be a bit of an arms race to figure out how to, you know, get the one you want to be, the one that's, you know, that's active.

Mm-hmm. Uh, and one way to deal with that is through the conflict detector and the conflict detection scanner that's built in on the troubleshoot tab of, of the plugin. But this new feature happens to, we're sort of feeding two birds with one scone here. Um, it just sidesteps to that entire issue for. The vast majority of cases because you're just injecting the Font Awesome Pro SVG, right into the post content.

Like that's what's there. There's not gonna be conflict with loading some other global style sheet or something like that because that icon is just right there in line, in the, in the page content. Um, so one of the benefits, another one of the benefits is improved. [00:10:00] Um. Like resilience, um, with the potential conflicts.

If you've got other plugins installed, loading your own version of on, awesome. There's just a way to sidestep that and just the icons inserted as an SVG right into the page. Yep. If somebody's like, I like the Font Awesome five version of the icons, can they, can they prioriti prioritize those ones if they like those ones best?

Oh, sure. I mean, you can, you can still configure the plugin to, to load stuff from FAU five. Um, it wouldn't use this same, uh, injecting the SVG into the block editor page content. It wouldn't, it wouldn't do it that way. But yes, if you wanna load Font Awesome five. You can do folks need to be using a font awesome kit to use this plugin.

Yeah, so the way it works is it uses the things where you configure the plugin to use your kit. That's how the icon chooser gets the SVGs that it needs. And, uh, so you do need to use a kit in order to use the editing feature. Uh, however. That doesn't mean it's loading your kit on the front end page loads.

Like when your website visitors, uh, view the pages, you can configure it so that it doesn't load the kit. And that's more of an advanced option. So for those who know why they would want to do that, um, there's just a filter that they can set, uh, a little one line of PHP code and our docs on the website show what that is.

Copy paste it. Um, like, put it in your themes, functions, PHP, and all that does is it, it stops the kit from loading on the page, uh, because it's not necessary. If all you're wanting to show are the icons that you added using the block editor and then styling them, then uh, those things are already in the page.

Content as SVGs and the style sheets are already gonna be self-hosted, uh, automatically. Um, the plugin will. Download it and store it on your WordPress server, the style sheet. And so that's what gets loaded. So everything's [00:12:00] self-hosted at that point. You don't actually need the kit itself to load on the page unless, uh, it's a compatibility situation.

Like, uh, you've got some old I tags or icon short codes in other older content, then you're gonna want the kit to load on your page so that those still render as expected. Or maybe you've used our conflict detector to, um. Block the other loads of font. Awesome. And from those other plugins, when you block those, you wanna make sure that you're still loading your, you know, current, uh, Font Awesome and pro kit so that any I tags or whatever that they may be using in those other plugins content, they continue rendering icons too.

So you'd still wanna load the kit if you need to support those compatibility scenarios. But if you're just doing the most basic thing, which is, you know, you set it up. You run the default, you don't have any other plugins that are trying to use font awesome. And you're just making pages with the block editor.

You really don't need to load the kit on front end page load. So you could add that one line to your themes functions that PHP, which just, uh, stops the kit from loading on the front end page load. So, uh, yeah, that it's, it's effectively all self-hosted, so you are using a fallen awesome pro Kip in order to kind of drive that whole use case scenario.

But without loading the kit on the front end page loads, you're only loading the kit on the back end page. Editing experience. Mm-hmm. Options. Good to have options.

So it is true. Um, we do want to ship while we're a little bit embarrassed, and this is a little, little bit of long time coming, but like we're continually improving as we go, as slow as it may be, but, uh. Is there any other future WordPress project? Not that we're promising Anything, uh, is there something that you would like to get to or requests that are coming your [00:14:00] way?

Uh, yes, definitely. Uh, two things come to mind. One is, uh, there's a lot more that you can do with our icons, particularly the SVG icons, things that have long time since four. Awesome. Five been supported in our SVG JavaScript technology. Uh, that's not supported in our web font. CSS technology, like power transforms, layers, all the text encounter stuff.

And, um, I, I think it'd be great to be able to work with all that stuff in the visual editing environment too. And in fact, for this, for this version of the plugin I had prototype. A more full, full feature set there. Um, but we didn't end up finishing and putting all the polish on, on all of that because I just wanted to do like the next step.

Right, right. But, but yeah, I mean, we've already thought through bringing more of that functionality. So things that you've long been able to do with our S-V-G-J-S stuff, if you knew how to do it, you know, kind of manually. Uh, directly in the HTML markup or something like that. Um, that would all be I that's, that's coming.

The other one, uh, that I, that I often encounter, especially in customer support is, uh, for customers who use some of the other premium page builder plugins, uh, it can be difficult to understand when you buy FAU and Pro, why isn't it working the way you expect in that page builder? And because it, it can just feel like, oh, I'm just, I'm trying to get my pro icons on my WordPress site and maybe you don't realize.

Yeah, but you're using this other vendor, this other software vendor's product, right? And their product seems to know about Fawn. Awesome. Then how come they don't know about my pro icons that are, or for my kit that I configured? And it's just because, uh, they haven't integrated their, their editor doesn't integrate that far into the fun awesome stuff that you're trying to set up there and use.

So, uh, I would like to. You know, enhance that, um, that probably would require like editor by editor saying, what can we do to improve that integration [00:16:00] so that if you're using one of those page builders, uh, you're getting more full feature from your FAU and pro icons. So when it, when you search, you're searching all of the icons that are available in your kit, your custom icons from your kit also are available there.

Things like that. Um, that, that's another thing I'd like to move into. Yeah. So for folks that are trying this out and, um, checking out the new improvements and things, or if they have requests, what's the best way to kind of let us know what's working, what's not working, or hey, we would love it if you would build this.

How can folks kind of send all that information? Yeah. Letting us know in, in customer support, you know, that, that, uh, thing that we offer. Actual Human support. Yeah. Trademark, actual, I, I am one, I'm one of the actual humans that ends up interacting, uh, with you. If you've got, if you're saying, Hey, this isn't working on my WordPress site, and, uh, I'm, I'm always in those conversations looking for.

The ways that we can solve problems that helps lots of people at the same time. And that's why those things that I mentioned, um, particularly the one with the, um, the page builder integration support, that's a really common that and conflicts with other plugins and selling conflicting version, that's very, very common.

Yep. But then as I hear the different scenarios, the different page builders that people are using, it, it helps me to understand where the priorities are, uh, when we get to building solutions that hopefully. Helps a bunch of people at the same time. So hello, what's on on sim.com And I might be an actual human that you, actual human that you talk to.

Uh, we got a trademarks though. Actual human tm. Yeah. Well, uh, thanks Mike for taking some time to, uh, tell us about the new WordPress plugin. And folks, you're gonna want to go check that out. So maybe it's time to update that plugin if you haven't used it for a while, or, um, if you wanna check out the functionality of it, you can, you can download it and, uh.

Let us know how it's working. Thanks, Mike. Appreciate it.[00:18:00]

I'd say that is about a wrap for this edition of Podcast Awesome. I want to thank Mike once again for. Being my Guinea pig early on, figuring out how to podcast. So thanks for that, Mike. And uh, thanks for building an awesome WordPress plugin as usual. So if you use font awesome icons and WordPress, and you want to use our icons more seamlessly, you're gonna want to check out that plugin.

It's more powerful, more visual, and way less conflicty. I guess that works. If you've been wrestling with plugin chaos, wishing your icons were actually visible in the block editor, instead of just hiding behind square brackets or dreaming of a self-hosted setup that doesn't break your site. This plugin update is definitely for you.

Try it out and give it a spin. If you hit any snags or maybe you just wanna say hi to an actual human at. Fa awesome. Drop us a line at hello@fontawesome.com And per usual, this podcast was produced and edited by me, Matt Johnson. The podcast awesome theme song was composed by Ronnie Martin and those little musical bits throughout the podcast were.

Composed by Zach Malm, and you can find all that information in our show notes. Alright. Icon stirs. Icon stirs. Is that what the fun, awesome folks are called these days? Anyway, uh, icon folk and tech folk, we will see you or you're, at least you'll hear, you'll hear me. You'll hear us on the next edition of podcast.

Awesome. Now go forth. Go make something [00:20:00] awesome.