Introduction
I’m documenting this because it makes creating and styling Sector USPs and Software Features with dynamically called Font Awesome icons (that being the difficult bit…) possible, which gives you sooo many more options in the content Query portion of the ‘AE Post Blocks’ Widget, and it’s not at all obvious. I basically stumbled on it while trying to find a solution I knew must exist. And I’ll probably forget how it works.
The Problem
Font awesome icons are fonts. They are invoked as content via css. There actually is no ‘content’ in the div. Even trying to invoke the specific icon via a Pods Template in the element class doesn’t work – it gets stripped out.
Otherwise, I’d have done exactly this to output the icon (which I genuinely thought would work!)
<div class="software_product_feature_icon fas fab fa-{@feature_fa_icon}"></div>
But the @feature_fa_icon gets stripped 🙁
The Solution
You might think, when I explain this, that I’m making it overly complex… but the ‘hack’ is because different widgets behave differently in terms of how they apply classes. Bear with me. It’s worth it.
SO. To display the icon (and this is specifically designed to be used in a custom AE Block Template), use a Pods – Field Value widget, and set the Pod type to, in this case, Software Product Features (will also work for Sector USPs), and the field to ‘feature_fa_icon‘. You will still want to style the icon itself inside the Custom CSS area for this specific widget. Here’s how I did mine:
.feature-icon {
justify-content: center;
display: flex;
float:left;
margin-right: 20px;
overflow:hidden;
font-size:30px;
background-color:#003366;
padding:10px;
border-radius: 8px;
border-width: 1px;
border-style: solid;
color:white;
min-width:50px;
max-width:50px;
text-align: center;
}
Now you’re wondering what the hell .feature-icon refers to, right?
Ok. Here comes the hack.
Under your icon, drag a AE – Custom Field widget.
Set the ‘Name’ to our icon field – ‘feature_fa_icon‘ for a Software Feature. Set the HTML Tag to ‘something you can easily identify but wont get used much’… I used H6. Who ever uses H6 for titles…?
In the Advanced tab, Set the CSS Classes to ‘Pods Field‘, and choose ‘Feature FA Icon‘ as the key. In the Advanced settings for the CSS Classes, enter ‘feature-icon fas fa-‘ in the Before field. (‘fas fa-‘ being the crucial bit, and ‘feature-icon‘ being the identifier I just styled with the above css!)
So when you spew it out, you get the all important ‘fas fa-[your icon slug]‘… and the AE Custom Field kindly applies that class to the parent column div!
Why didn’t we just apply the dynamic CSS Classes bit to the Pods Field Value widget itself? because it doesn’t extend its class to its parent 🙁
And for some reason, the AE Custom Field on its own, even with the same settings, won’t output the icon itself. But the accidentally discovered combination of the two produces the right set of code wrappers, and works perfectly. So don’t question it. Just use it.
So, of course, at this point, you’ve got a text widget spewing a H6 icon slug as a word you don’t want to display. So add the following to the Custom CSS for the AE Custom Field widget, and we’re good!
h6.ae-element-custom-field {
display:none;
}
The Point of All This
Now if you’re wondering why the hell you’d want to jump through all of those hoops?
Well, if you had to output the software features from a Pods Template to ‘do the loop’, then firstly, you’d have to manually style the whole darn thing yourself from a single view, including the responsive breakpoints, because you wouldn’t be able to style each block within Elementor. Now you can completely style the whole thing via an AE Block in Elementor!
And secondly, that means you have the full might of the ‘AE Posts Blocks‘ query when outputting them. For example, to recreate for TouchPoint a similar layout to our own website, I have set the query as: Category: Hero Features, Tags: TouchPoint, Post Count:3
And then I copy pasted that, and simply added Offset:3 to the next section to output ‘the next 3 features’.
Conclusion
In practice, you should never need to do this. I’ve already done it. Copy/Paste mine!
TL;DR
There’s a nifty way to combine two widgets to output a dynamic font awesome icon which facilitates custom blocks for Software Features and Sector USPs. Fortunately, there’s one ready built you can just copy paste or use from a global. Aren’t I nice?
While You’re Here… Something You Should Know…
I really don’t know why, but if you choose to order posts in most of the archive or portfolio or post block type widgets, the posts that get returned in the preview in elementor itself seem to be the opposite of what you want. Which is annoying, but not really a problem. For example, I’ve got 6 ‘Hero Features’ for TouchPoint. I wanted them to appear in a specific order, per our own site. I had to set the order to ‘Menu Order’ > ASC (which you’d think should be DSC!). Which also means the post Offset might need tweaking to display ‘the next posts’ correctly. That meant that my ‘simple features’ section actually previews my ‘security features’ section and vice versa. Annoying, but hardly the end of the world. Just look at the actual page as you’re doing it to check the order, not the editor! (Or figure out what the hell I’m doing wrong?)