Ramesh (thecodeisclear)

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>

As you mentioned, Products link takes you to a page while the others seem to be posts. Hence the title has a different class. I will extend what Barnez wrote

.page-title, .entry-title {
  display: none;
}

Edit: @Barnez beat me to it 🙂 You could still combine the CSS if you wish or have two separate entries.

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)

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

Welcome to WordPress.

Are you trying to create button links in a menu (or) are you trying to create button links within a page/post that links to other content on your site?

For the first, you will need to add links under Appearance > Menus and select the pages you want to add to the menu.

If you are trying to create buttons that link from post content to other areas of the website, I would recommend a Shortcode Plugin such as https://wordpress.org/plugins/shortcodes-ultimate/ which will let you create clickable buttons.

If I am totally off the mark, please let me know with additional information & screenshots.

I have responded to your question on the theme support page. It is a feature in the Customize section.

I think you will need to add the table-layout property to the table like this

.tablepress {
    border: medium none;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 1em;
    table-layout: fixed;
    width: 100%;
}

(other settings are already in tablepress-combined.min.css)