Icon in line with text - Support | Kriesi.at

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
March 11, 2018 at 3:03 pm #925204

Sophie
Participant

Hi,

I wonder how to simply add an entypo-fontello icon within a line of text or text block, e.g.: Thank you :-) ! or That’s why we “heart icon” what we do! without the icon moving to the next line. Thank you in advance.

Kind regards,
Sophie

March 12, 2018 at 8:21 am #925367
Nikko
Inactive Moderator
Hey Sophie,

Try using this text, make sure you’re using Text Editor and not Visual Editor:
```
<span class="av-icon-char av-icon-char-custom" style="font-size:20px;line-height:20px;width:20px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span>
```
then on Quick CSS (located in Enfold > General Styling), add this css code:
```
#top span.av-icon-char.av-icon-char-custom {
    float: left;
    margin-right: 4px;
}

#top span.av-icon-char.av-icon-char-custom:before {
    content: "\e806" !important;
}
```
Hope it helps :)

Best regards,
Nikko
April 4, 2018 at 2:33 pm #937188

Sophie
Participant

Hi Nikko,

thank you, that works, but when I switch to Visual Editor and save the post, the icon is not visible anymore, neither in backend nor in frontend. And what do I do if I would like to use a different icon, e.g. Fontello ue800 ? And what if I would like to put different icons in different text of posts, do I always have to put the CSS in custom CSS field?

Thank you for your kind help in advance.

Best regards,
Sophie

April 4, 2018 at 4:12 pm #937255
Victoria
Inactive Moderator
Hi Sophie,

Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look? Can you please specify the page where you’re adding the icon.

You can use the unicode code in this case
http://www.fileformat.info/info/unicode/char/2665/index.htm

Best regards,
Victoria
- This reply was modified 6 years, 7 months ago by Victoria.
April 5, 2018 at 12:32 pm #937674

Sophie
Participant

Hi Victoria,

yes sure, please kindly find the admin details in private content box. This is a test copy of my real website. Just go to post with name “Test”. As already advised when switching to Visual Editor and saving the post, the icon is not visible anymore, neither in backend nor in fronted.

I loaded the Fontelico smiley icons http://fontello.com/ via Enfold Theme Options > Iconfont manager. How to use the unicode codes for these? It’s important to me to use these icons in line with text.

Thank you for your help in advance.

Kind regards,
Sophie

April 5, 2018 at 1:37 pm #937726

Victoria
Inactive Moderator

Hi Sophie,

To use the build unicode icons you can look for their html entity code and just insert it

I have it saved for you on the test page.

Best regards,
Victoria

April 5, 2018 at 1:55 pm #937746

Sophie
Participant

Thank you, Victoria. I understand. But how can I use the Fontello icons in line with text (please see screenshot in pricate content box)?

Kind regards,
Sophie

April 6, 2018 at 6:17 am #938027

Victoria
Inactive Moderator

Hi Sophie,

Here are some threads to consider:
https://kriesi.at/support/topic/fontello-icons-in-text/
https://kriesi.at/support/topic/fontello-icon-inline-with-text-block/

If you need further assistance please let us know.
Best regards,
Victoria

April 6, 2018 at 12:43 pm #938239

Sophie
Participant

Hi Victoria,

thank you for the links.

This one https://kriesi.at/support/topic/fontello-icon-inline-with-text-block/ is only working with ALB.
This one https://kriesi.at/support/topic/fontello-icons-in-text/ is also not working.

Still I don’t know how to showing up the following text and icon in one row:
Hello [av_font_icon icon='ue800' font='fontello' style='' caption='' link='' linktarget='' size='18px' position='left' color='' custom_class='' admin_preview_bg=''][/av_font_icon] how are you?

Please urgently help. Thank you.

Kind regards,
Sophie

April 7, 2018 at 10:17 pm #938676
Mike
Moderator
Hi,
If I understand correctly, you want to use the fontello icons in the default editor, getting them from the shortcode wand, and use them inline with your post, any post.
Ok, then add this code in the General Styling > Quick CSS field:
```
.av_font_icon.av-icon-style-inline {
    float: none!important; 
    display: inline-block!important; 
    vertical-align: middle!important; 
    margin: 0 8px!important; 
}
```
Then go to your post and use the shortcode wand to get your icon, in my case I used a rocket:
```
Hello [av_font_icon icon='ue8dd' font='entypo-fontello' style='' caption='' link='' linktarget='' size='40px' position='left' color='' admin_preview_bg=''][/av_font_icon] how are you?
```
Now look at the code for style=” you will need to add “inline” between the two ” like this:
```
Hello [av_font_icon icon='ue8dd' font='entypo-fontello' style='inline' caption='' link='' linktarget='' size='40px' position='left' color='' admin_preview_bg=''][/av_font_icon] how are you?
```
and that is it! You only have to add the css one time, and add the word “inline” every time for it to work.

Best regards,
Mike
April 8, 2018 at 3:45 pm #938799

Sophie
Participant

Hi Mike,

that is exactly what I wanted to achieve :-) ! It is working fine, thank you so much! I think you can close this topic now :-) !

Have a great day!

Kind regards,
Sophie

April 8, 2018 at 3:47 pm #938801

Mike
Moderator

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.
For your information, you can take a look at Enfold documentation here
and the video tutorials here
And if there are features that you wish Enfold had, you can request them and vote the requested ones here
For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

Best regards,
Mike
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Icon in line with text’ is closed to new replies.