Using an icon as cursor in text typing setup

[omid020]

Hi there!

Is there any solution to use an icon (font awsome icon) as Cursor in text typing setup of headline in pro version?

[friech]

Hi Omid,

Thank you for writing in, use the icon inline code like this:

<i data-x-icon-b="&#xf287;" ></i>

There are three instances of data-x-icon now:

• data-x-icon-b for social icons.
• data-x-icon-o for outline icons.
• data-x-icon-s for solid icons.

this f287 is the icon Unicode, replace that with the Unicode of the icon that you desire. Icons Unicode can be found here.

Hope it helps,
Cheers!

[omid020]

@friech

<i data-x-icon-b=“” ></i>

@friech Thanks for you hint but there is a issue! when I type something like this code in Cursor field:
<i data-x-icon-b="&#xf287;" ></i>
after saving the footer content the Cursor field looses its value and remains empty!

[nabeel]

Hi again,

An alternative way would be using CSS. Give your Classic Text Type element a class icon-cursor first then in the Cursor field add a white space instead of any content and in last add the following code in your child theme’s style.css file:

.icon-cursor .typed-cursor:before {
    content: '\f287';
    font-family: "FontAwesome";
    font-weight: 400;
    display: inline-block;
    font-style: normal;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Let us know how this goes!

[omid020]

@Nabeel
Thank you! It works! How can I have an outline icon with this trick? For example I want this font:

content: '\f3c5';

[nabeel]

Hi again,

To use an outline icon, just change the font-weight from 400 to 900 in the above code so it will be:

.icon-cursor .typed-cursor:before {
    content: '\f3c5';
    font-family: "FontAwesome";
    font-weight: 900;
    display: inline-block;
    font-style: normal;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

As the documentation says “each of its styles corresponds to a particular font weight:” you can refer to the documentation here https://origin.fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

Cheers!

[omid020]

Hi @Nabeel,

Indeed font-weight does not work for outline fonts like f3c5 . Changing font-weight only display the solid one or an unknown rectangle. In previous method I could easily use and display outline font with data-x-icon-o reference.

P.S : In newest version of fontawsome the f3c5 is a PRO icon!

[friech]

Hi Omid,

@omid020

@friech Thanks for you hint but there is a issue! when I type something like this code in Cursor field:
<i data-x-icon-b="&#xf287;" ></i>
after saving the footer content the Cursor field looses its value and remains empty!

I try to replicate this issue on my end but I could not, I edited footer, header, and even content, and I did not lose the cursor code. Could be something on your setup that is conflicting it.

Please do a test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Thanks,

[omid020]

Hi @friech,

Did you close your setting page (for example footer panel) and return again to check the cursor field? I deactivated all plugins but still no HTML code stores in cursor field. When I store something like this in cursor field, the final output is only underline character ( _ ) :
_<i data-x-icon-b="&#xf287;" ></i>

[rad]

Hi Omid,

I did save it closed the builder and view it on the live page, then reopen it in the builder and it still works. Perhaps there something in your site like plugin that sanitize data being saved or forwarded?

Thanks!

[omid020]

Thank you @Rad, It is strange! I tried it with all deactivated plugins but no success!

[ruenel]

Hello Omid,

I am another staff checking in. I have logged in to your site and created a test page.
Both the typing text feature of the headline element and the classic typing text element is working when I added the icon code:

 <i class="x-icon" data-x-icon-b="&#xf287;" ></i>

Please check out the test page in the secure note.

[omid020]

Hi @RueNel,

Yes, It works but not in Headline element of footer area! I changed icon of your code and used it in footer area too, after saving I can see the icon only in content area.

I don’t know how can I add classic typing text element in footer area of PRO version (To be honest I didn’t find its element) , but I have used Headline element and I am sure it doesn’t store HTML code as cursor value.

Thanks

[paul.r]

Hi Omid,

It will also work in Headline element. Please make sure to add it i code tab.

See screenshot

Thanks

[omid020]

@paul.r

Please make sure to add it i code tab.

Hi @paul.r
It seems you have not tried it in cursor field. Please see my screenshot.

[rad]

Hi @omid020,

Yes, I can confirm that issue of footer’s headline type feature. Unfortunately, there is no temporary workaround as of this moment. I added this to our issue tracker.

Thanks!