WP Reactions Documentation WP Reactions Documentation
  • Knowledge Base 
  • Open a Ticket 
Ask a Question
WP Reactions Documentation WP Reactions Documentation
Ask a Question
WP Reactions Documentation
  • Knowledge Base 
  • Open a Ticket 

WP Reactions

  • folder icon closed folder iconGetting Started
    • Download WP Reactions
    • Installing WP Reactions
    • Activate License Key
    • Quick Start Guide
    • Revoke License Key
  • folder icon closed folder iconEmoji Reaction Layouts
    • Original Reactions
    • Reaction Button
    • Jane Reactions
    • Jimbo Reactions
    • Mini Reactions
  • folder icon closed folder iconLayout Options
    • Emoji Picker
    • Emoji Reveal
    • Flying Animated Text
    • Reaction Button Design
    • Reaction Container Styling
    • Emoji Animation
    • Call to Action
    • Random Counts
    • Fake Counts
    • Button Padding
    • Emoji Border Styling
    • Emoji Background Styling
    • Emoji Sizes
    • Shortcode Alignment
    • Emoji Badges
    • Flying Animation Effect
    • Primary Call to Action
    • Social Share Call to Action
    • Button Icon Styling
  • folder icon closed folder iconSettings
    • General
    • Advanced
    • WooCommerce Reactions
  • folder icon closed folder iconSocial Media Sharing
    • Social Share Platforms
    • Button Design
    • Share Counter
    • Button Behavior
    • Social Popup Overlay
  • folder icon closed folder iconWPML Intergration
    • Installing Required WPML Plugins
    • Translate Global Activation
    • Translate Shortcodes
  • folder icon closed folder iconShortcode Generator
    • Shortcode Editor
    • Bind Shortcode to Post
  • folder icon closed folder iconGlobal Activation
    • On Page Options
    • Custom Post Types
  • folder icon closed folder iconAnalytics
    • Emoji Reaction Data
    • Social Sharing Data
  • folder icon closed folder iconTools
    • Advanced Random Counts
    • Reset User Counts
  • folder icon closed folder iconDevelopers
    • Action Hooks & Filters
    • JavaScript Events
loading
Popular Searches
  • Global Activation
  • Shortcode
  • Layout Options
  1. Home
  2. WP Reactions
  3. Layout Options
  4. Button Icon Styling
Updated on December 11, 2021

WP Reactions

  • folder icon closed folder iconGetting Started
    • Download WP Reactions
    • Installing WP Reactions
    • Activate License Key
    • Quick Start Guide
    • Revoke License Key
  • folder icon closed folder iconEmoji Reaction Layouts
    • Original Reactions
    • Reaction Button
    • Jane Reactions
    • Jimbo Reactions
    • Mini Reactions
  • folder icon closed folder iconLayout Options
    • Emoji Picker
    • Emoji Reveal
    • Flying Animated Text
    • Reaction Button Design
    • Reaction Container Styling
    • Emoji Animation
    • Call to Action
    • Random Counts
    • Fake Counts
    • Button Padding
    • Emoji Border Styling
    • Emoji Background Styling
    • Emoji Sizes
    • Shortcode Alignment
    • Emoji Badges
    • Flying Animation Effect
    • Primary Call to Action
    • Social Share Call to Action
    • Button Icon Styling
  • folder icon closed folder iconSettings
    • General
    • Advanced
    • WooCommerce Reactions
  • folder icon closed folder iconSocial Media Sharing
    • Social Share Platforms
    • Button Design
    • Share Counter
    • Button Behavior
    • Social Popup Overlay
  • folder icon closed folder iconWPML Intergration
    • Installing Required WPML Plugins
    • Translate Global Activation
    • Translate Shortcodes
  • folder icon closed folder iconShortcode Generator
    • Shortcode Editor
    • Bind Shortcode to Post
  • folder icon closed folder iconGlobal Activation
    • On Page Options
    • Custom Post Types
  • folder icon closed folder iconAnalytics
    • Emoji Reaction Data
    • Social Sharing Data
  • folder icon closed folder iconTools
    • Advanced Random Counts
    • Reset User Counts
  • folder icon closed folder iconDevelopers
    • Action Hooks & Filters
    • JavaScript Events

Button Icon Styling

Estimated reading: 2 minutes 3895 views

This option is only available for the Reaction Button

How does Button Icon Styling Work?

The is the icon you have selected that is on the left side of your Reaction Button Text. This option block gives you control over your icon styling. You can easily manage your icon settings by changing size, color and position.

Breakdown of Options

Before Text – Select this option to have your icon show before your text on the left hand side.

After Text – Select this option to have your icon show after the text on the right side.

Icon Color – Use your color picker here to choose from unlimited colors or drop you color code in with ease.

 

Icon Hover Color – Use color picker, same as above to select or paste you color code in. This option is when a user hovers over your button, the color of the icon changes on hover.

Icon Size – Use this dropdown to select from preset icon sizes. You can choose from 10px up to 60px for larger buttons or banners.

Icon Spacing – This dropdown lets you choose how far away from the button text you would like your icon. It is the padding between the text and the icon. Simply click on the dropdown arrow and select your how many pixels. The selections range from 5px up to 30px.  You can preview your size changes in the preview window to the right of your screen to view you changes live.

This option is available in the following layouts:

You can find this option in the Reaction Button only. To learn more about the Reaction Button click here.

FAQ's

What icons do you use?

We use Font Awesome icons.

Can I upload my own icons for this option?

No. Not at this time. If you have a request please login and submit.

Still need help?

Helpful? Yes No

How can we help?

A premium WordPress theme with integrated Knowledge Base,
providing 24/7 community based support.

CONTENTS

Quick Links

  • Demo Site
  • Pricing
  • Contact Us

Products

  • WP Reactions PRO
  • WP Reactions Lite
  • Emoji Uploader

Support

  • Open a Ticket
  • Lite Support
  • Knowledge Base
  • Terms of Use
  • Refund Policy
  • Privacy

© Copyright 2022, All Rights Reserved WP Reactions, LLC