Font awesome icon use in text or box, not just button

Do you want the icon between the text or like a header? If you want it like a header on top?

I found that you can trick SU to use the service shortcode to output just the icon and nothing else.

[su_note][su_service icon="icon: edit" size="33" title="Note"][/su_service]How do I use font awesome icons (namely, 'icon-edit') inside a note using SU?

I can do this easily for a button, yes, but I want to use it inside something else, especially a note but also a box if possible.
[/su_note]

This will place the icon at the top of the note with a title “Note”

If you want the icon to float right/left to the text, you can use this

[su_note][su_service icon="icon: edit" size="33" title="" class="fltleft"][/su_service]How do I use font awesome icons (namely, 'icon-edit') inside a note using SU?

I can do this easily for a button, yes, but I want to use it inside something else, especially a note but also a box if possible.
How exactly do I do this?

Font awesome gives out the html but within wordpress and shortcodes ultimate, I can't seem to make
<code><i class="icon-edit icon-2x pull-left icon-border"></i></code> work.

Also, just want to shout out how much I LOVE using shortcodes Ultimate. Much easier and better than using Woothemes shortcodes.

Thanks much for your help!
[/su_note]

and add the custom css (Plugin Settings page > Custom CSS)

.fltleft {
	float:left;
}

Here is how the output from the second part works (with custom css)

https://thecodeisclear.in/wp-content/uploads/2015/02/note-icon.jpg

Hi, Thecodeisclear.

Thanks for a speedy response. Your workaround does as requested but of course there’s another piece to the puzzle!

I am trying to re-create an image that has a link to another page – using instead SU and font awesome.

This mock page on the site contains the box I want to replicate:
https://barrybradford.com/home2/

On the right column you’ll see 3 red boxes. The first one, “Book Barry” is the image with the link. Note that it has the icon and lettering in white.

I could not get the SU note lettering and icon in white. I tried a bunch of things including adding a class “book-barry” to the custom.css file, but couldn’t get the text to turn white.

Ideally if this isn’t too much trouble, I would like to have a hover effect on the link. But really all I need is for the text and icon to be white and linked.

Here’s the code for the other 2 red boxes beneath the image:

2) <a href="/bookings">[su_note note_color="#c1122f" text_color="#ffffff" class="book-barry"][su_service icon="icon: edit" size="63" title="Book Barry" class="book-barry"][/su_service][/su_note]</a>

3) [su_note note_color="#c1122f" text_color="#ffffff" class="book-barry"][su_service icon="icon: edit" size="63" title=none]<a href="/bookings/">Book Barry using SU[/su_service]</a>[/su_note]

Any chance this is an easy workaround that I (again) am just not seeing?

Thanks again.

Hi,

I haven’t been able to nail the hover, but to change the color, you also need the icon_color="#ffffff" property. The custom CSS needs to address the a element like this

.book-barry2 a {
	font-size: 44px;
	color: #ffffff;
}

<a href="/bookings">[su_note note_color="#c1122f" text_color="#ffffff"][su_service icon="icon: edit" size="63" title="Book Barry" class="book-barry2" icon_color="#ffffff"][/su_service][/su_note]</a>

That worked for the icon color, but not for the a link text.

I tried different variations but it seems the css is not working. I copied and pasted your styling directly to my custom.css file so no typos.

And this on the page:

[su_note note_color=”#c1122f” text_color=”#ffffff”][su_service icon=”icon: edit” size=”63″ title=”Book Barry” class=”book-barry2″ title_color=”#ffffff” icon_color=”#ffffff”][/su_service][/su_note]

Added in a title_color on a guess but clearly that didn’t work either.

Curious thing. I don’t know how to make the text white. Why is this so tough? Brain fart?

@chezsheles: I will have a look on Monday and help you fix this. Could you send a link like you did the last time?

OK it’s https://barrybradford.com/home2/

Many thanks for your help thus far.

Hi,

When looking at the custom.css file, I can only see the following code

.book-barry2 a:hover {
    text-decoration: underline;
}

I don’t see the declaration for the a tag. Here is what I have done and the result

In Post text
<a href="/bookings">[su_note note_color="#c1122f" text_color="#ffffff"][su_service icon="icon: edit" size="63" title="Book Barry" class="book-barry2" icon_color="#ffffff"][/su_service][/su_note]</a>

Custom CSS

.book-barry2 a {
	font-size: 44px;
	color: #ffffff;
}

.book-barry2 a:hover {
    color: #E6DB74;
}

Result
https://thecodeisclear.in/wp-content/uploads/2015/03/sshot.png

PS: For some reason, the icon doesn’t change color even if I explicitly add a hover to the fa-edit class

.book-barry2 .fa-edit:hover {
	color: #E6DB74;
}

I actually had this on my custom.css sheet, just above the code you’d seen:

.book-barry2 a {
font-size: 64px;
color: #ffffff;
}

I added in your fa-edit hover code anyway just to see what it would do …

.book-barry2 .fa-edit:hover {
color: #E6DB74;
}

And now the result is the book barry box in question now has a white background! But the text itself is black and it underlines when I hover over it.

So your code was similar to my code for the text in that one box. Does this indicate something’s wrong with the server perhaps?

It is quite puzzling. Can you also post the shortcode that you used?

Can you tell me where you are adding the custom CSS? You should add it under the plugins’ settings page and not in the child theme’s custom css.

https://thecodeisclear.in/wp-content/uploads/2015/03/css-settings.png

The shortcodes CSS overrides the theme’s custom.css and this could be the cause of the problem.

Hi,

I moved the custom styles to the plugin settings page and now it all works. I had been to the SU settings page earlier but there was a message mid way down aboutz;

<!–
IMPORTANT
You need to add this CSS code to the custom CSS editor at plugin settings page
–>

This confused me since I was ALREADY on the plugin settings page! So I ignored it. And look what that got me.. ??

Anyway, many thanks for your continued help on this. I got it working so that the original homepage is now how it should be!