Occasionally I run into questions on Facebook groups that ask specifically how to do something custom in Kajabi.
I love answering those questions because I know how difficult it can be to discover the answer simply by googling or searching in groups.
So let’s dive into …
how to add an arrow or other icon to a button in Kajabi.
It’ll look a little like this.
First, you’re going to need to add some custom css to your button.
You can edit the css by going to your page builder page and hitting the “…” and clicking “Edit Code”.
When you see a list of files and folders, navigate to Assets then click the overrides.scss.liquid file to edit. This file is where you want to put any customizations or changes to your css. It protects the original Kajabi code and keeps all of your changes in one place!
Put this code into this file:
button::after {
content: "\f061";
font-family: "Font Awesome 5 Free";
font-weight: 900;
padding-left: 5px;
}
and hit that SAVE button!!
A few things about this custom css code:
- The ‘button’ class targets all buttons on this page. If you want to change only one button on the page, then we need to dig further into customization using a unique class for your target button. Contact me if you’d like some help with this.
- The ‘::after’ mean the icon will show up after the text. Use ‘::before’ if you want it to show up before the text.
- The ‘f061’ is a Font Awesome code specifically assigned to this particular arrow. You can find any type icon you want to use and it’s appropriate code at www.fontawesome.com. Kajabi uses Font Awesome already so these should be available.
- The font-weight is the amount of “boldness” of the font and is optional based on preference.
- The padding is optional for spacing and based on preference. If you use the icon on the left of the text then the padding would be padding-right.
Play around with these as needed.
Troubleshooting:
If it doesn’t show up correctly, you may need to point to a better repository of Font Awesome. In that case, SAVE your work, and then go to Templates then index.liquid in that same file and folder list. Copy and paste this somewhere above the </head> of your template index file:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
Let me know if you have any issues with this. I’m happy to help!
