Title: using icon with short code
Last modified: December 15, 2020

---

# using icon with short code

 *  Resolved [prisuri](https://wordpress.org/support/users/prisuri/)
 * (@prisuri)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/using-icon-with-short-code/)
 * I am using ajax search for woocommerce and by default the short code is giving
   a search box. I want to implement icon using same. hope you can help me.
 * u can use this code for your help.
 *     ```
       <?php
   
       // Exit if accessed directly
       if ( ! defined( 'ABSPATH' ) ) {
       	exit;
       }
   
       if ( class_exists( 'WC_Widget' ) ) {
   
       	add_action( 'widgets_init', function () {
       		register_widget( 'DGWT_WCAS_Search_Widget' );
       	} );
   
       	class DGWT_WCAS_Search_Widget extends WC_Widget {
   
       		/**
       		 * Constructor
       		 */
       		public function __construct() {
   
       			$this->widget_cssclass    = 'woocommerce dgwt-wcas-widget';
       			$this->widget_description = __( 'AJAX (live) search form for WooCommerce', 'ajax-search-for-woocommerce' );
       			$this->widget_id          = 'dgwt_wcas_ajax_search';
       			$this->widget_name        = __( 'AJAX Search bar', 'ajax-search-for-woocommerce' );
       			$this->settings           = array(
       				'title' => array(
       					'type'  => 'text',
       					'std'   => '',
       					'label' => __( 'Title', 'ajax-search-for-woocommerce' )
       				),
       				'layout' => array(
       					'type'  => 'select',
       					'std'   => 'default',
       					'options' => array(
       						'default'     => __( 'Default', 'ajax-search-for-woocommerce' ),
       						'classic'     => __( 'Search bar only', 'ajax-search-for-woocommerce' ),
       						'icon'        => __( 'Search icon', 'ajax-search-for-woocommerce' ),
       						'icon-flexible' => __( 'Icon on mobile, search bar on desktop', 'ajax-search-for-woocommerce' ),
       					),
       					'label' => __( 'Layout', 'ajax-search-for-woocommerce' )
       				)
       			);
   
       			parent::__construct();
       		}
   
       		/**
       		 * Outputs the content of the widget
       		 *
       		 * @param array $args
       		 * @param array $instance
       		 */
       		public function widget( $args, $instance ) {
   
       			$this->widget_start( $args, $instance );
   
       			$layoutParam = '';
       			if ( ! empty( $instance['layout'] ) && in_array( $instance['layout'], array( 'classic', 'icon', 'icon-flexible' ) ) ) {
       				$layoutParam = ' layout="' . $instance['layout'] . '"';
       			}
   
       			echo do_shortcode( '[wcas-search-form' . $layoutParam . ']' );
   
       			$this->widget_end( $args );
       		}
   
       	}
   
       }
       ```
   
    -  This topic was modified 5 years, 5 months ago by [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/).
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fusing-icon-with-short-code%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 1 replies (of 1 total)

 *  [macariojames](https://wordpress.org/support/users/macariojames/)
 * (@macariojames)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/using-icon-with-short-code/#post-13793517)
 * Hi!
 * > I want to implement icon using same
 * What type of icon are you looking to implement exactly?
 * Macario

Viewing 1 replies (of 1 total)

The topic ‘using icon with short code’ is closed to new replies.

 * In: [Everything else WordPress](https://wordpress.org/support/forum/miscellaneous/)
 * 1 reply
 * 2 participants
 * Last reply from: [macariojames](https://wordpress.org/support/users/macariojames/)
 * Last activity: [5 years, 5 months ago](https://wordpress.org/support/topic/using-icon-with-short-code/#post-13793517)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics