X Pro - Icons - Emprty Space Bottom The Header - Etc

Bougioukos · November 28, 2017, 6:51am

Hello again.
I am sorry I waste your time but i’m trying to learn some things for the Pro theme.

I would like to find a complete list for icons. I already use on my top bar:
but I would like more. Like envelope, something for address, anyway a complete list of icons.
I would like to remove the empty space between sidebar and content, header and content, footer and content etc.
Also in another case I would like to make main content area “border-radius”. I can do it for sidebar but for main content I
can’t.

@thai @paul.r

christian · November 28, 2017, 11:38am

Hey @Bougioukos,

The icons are from Font Awesome. You can visually check them here.
I’m not sure what you’re referring to here. Please give us the URL of the page you’re having his problem.

Thanks.

Bougioukos · November 28, 2017, 4:26pm

Take a look please at the secure note. As you can see in the top bar i have 3 icons. The code I have written is:
class=“x-icon x-icon-map-marker” data-x-icon=“”
class=“x-icon x-icon-phone” data-x-icon=“”
class=“x-icon-envelope” data-x-icon=“”
I want to know if there is a link I can find codes for x-icons.
Also as you can see, I have used:
.x-sidebar {
width: 21.5%;
padding: 10px;
background-color: #ffff;
border-radius: 10px;
}
When i am trying to do the same with .x-main I don’t have the same radius result. I don’t have radius at all.

Also I don’t know how to delete the empty space between header - (sidebar area and main content area)

jade · November 28, 2017, 4:48pm

Hi there,

Please add this code in the custom CSS:

.x-sidebar-content-active .x-container.offset {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
}

.x-sidebar-content-active .entry-wrap {
    box-shadow: none;
}

The icons that show up in the topbar are the social icons which are generate by a code.

Since you are using Pro, instead of using the classic header, I suggest that you make use of the header builder feature where you can customiza the header view.

Hope this helps.

Bougioukos · November 28, 2017, 4:55pm

Hahahaha. I knew it that you will tell me this.
I know about header builder. I’m trying to learn the “hard way”. This is not my main website. I am trying to learn.
Anyway your css code working perfect.
Thanks all of you guys.

jade · November 28, 2017, 5:47pm

No problem!

In case you want to stick with the native header, you can still add some more icons for the topbar social icons.

You will need to install a child theme and add this code to the functions.php file:

// Social Output
// =============================================================================

if ( ! function_exists( 'x_social_global' ) ) :
  function x_social_global() {

    $facebook    = x_get_option( 'x_social_facebook' );
    $twitter     = x_get_option( 'x_social_twitter' );
    $google_plus = x_get_option( 'x_social_googleplus' );
    $linkedin    = x_get_option( 'x_social_linkedin' );
    $xing        = x_get_option( 'x_social_xing' );
    $foursquare  = x_get_option( 'x_social_foursquare' );
    $youtube     = x_get_option( 'x_social_youtube' );
    $vimeo       = x_get_option( 'x_social_vimeo' );
    $instagram   = x_get_option( 'x_social_instagram' );
    $pinterest   = x_get_option( 'x_social_pinterest' );
    $dribbble    = x_get_option( 'x_social_dribbble' );
    $flickr      = x_get_option( 'x_social_flickr' );
    $github      = x_get_option( 'x_social_github' );
    $behance     = x_get_option( 'x_social_behance' );
    $tumblr      = x_get_option( 'x_social_tumblr' );
    $whatsapp    = x_get_option( 'x_social_whatsapp' );
    $soundcloud  = x_get_option( 'x_social_soundcloud' );
    $rss         = x_get_option( 'x_social_rss' );
    
    $new_icon1   = 'http://example.com';

    $output = '<div class="x-social-global">';

      if ( $facebook )    : $output .= '<a href="' . $facebook    . '" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon="&#xf082;" aria-hidden="true"></i></a>'; endif;
      if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon="&#xf081;" aria-hidden="true"></i></a>'; endif;
      if ( $google_plus ) : $output .= '<a href="' . $google_plus . '" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square" data-x-icon="&#xf0d4;" aria-hidden="true"></i></a>'; endif;
      if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square" data-x-icon="&#xf08c;" aria-hidden="true"></i></a>'; endif;
      if ( $xing )        : $output .= '<a href="' . $xing        . '" class="xing" title="XING" target="_blank"><i class="x-icon-xing-square" data-x-icon="&#xf169;" aria-hidden="true"></i></a>'; endif;
      if ( $foursquare )  : $output .= '<a href="' . $foursquare  . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-icon-foursquare" data-x-icon="&#xf180;" aria-hidden="true"></i></a>'; endif;
      if ( $youtube )     : $output .= '<a href="' . $youtube     . '" class="youtube" title="YouTube" target="_blank"><i class="x-icon-youtube-square" data-x-icon="&#xf166;" aria-hidden="true"></i></a>'; endif;
      if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo-square" data-x-icon="&#xf194;" aria-hidden="true"></i></a>'; endif;
      if ( $instagram )   : $output .= '<a href="' . $instagram   . '" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon="&#xf16d;" aria-hidden="true"></i></a>'; endif;
      if ( $pinterest )   : $output .= '<a href="' . $pinterest   . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square" data-x-icon="&#xf0d3;" aria-hidden="true"></i></a>'; endif;
      if ( $dribbble )    : $output .= '<a href="' . $dribbble    . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble" data-x-icon="&#xf17d;" aria-hidden="true"></i></a>'; endif;
      if ( $flickr )      : $output .= '<a href="' . $flickr      . '" class="flickr" title="Flickr" target="_blank"><i class="x-icon-flickr" data-x-icon="&#xf16e;" aria-hidden="true"></i></a>'; endif;
      if ( $github )      : $output .= '<a href="' . $github      . '" class="github" title="GitHub" target="_blank"><i class="x-icon-github-square" data-x-icon="&#xf092;" aria-hidden="true"></i></a>'; endif;
      if ( $behance )     : $output .= '<a href="' . $behance     . '" class="behance" title="Behance" target="_blank"><i class="x-icon-behance-square" data-x-icon="&#xf1b5;" aria-hidden="true"></i></a>'; endif;
      if ( $tumblr )      : $output .= '<a href="' . $tumblr      . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-icon-tumblr-square" data-x-icon="&#xf174;" aria-hidden="true"></i></a>'; endif;
      if ( $whatsapp )    : $output .= '<a href="' . $whatsapp    . '" class="whatsapp" title="Whatsapp" target="_blank"><i class="x-icon-whatsapp" data-x-icon="&#xf232;" aria-hidden="true"></i></a>'; endif;
      if ( $soundcloud )  : $output .= '<a href="' . $soundcloud  . '" class="soundcloud" title="SoundCloud" target="_blank"><i class="x-icon-soundcloud" data-x-icon="&#xf1be;" aria-hidden="true"></i></a>'; endif;
      if ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square" data-x-icon="&#xf143;" aria-hidden="true"></i></a>'; endif;
      
      $output .= '<a href="' . $new_icon1         . '" class="newicon" title="New Icon" target="_blank"><i class="x-icon-star-o" data-x-icon="&#xf006;" aria-hidden="true"></i></a>';

    $output .= '</div>';

    echo $output;

  }
endif;

Please update the link that is in the $new_icon1 = 'http://example.com'; line.

You can also see the line:

$output .= '<a href="' . $new_icon1 . '" class="newicon" title="New Icon" target="_blank"><i class="x-icon-star-o" data-x-icon="" aria-hidden="true"></i></a>';

You can change the icon by editing the class attribute to the icon that you want to use as well as the data-x-icon attribute.

You may refer to fontawesome for this.

http://fontawesome.io/icons/

For example you want to use this icon.

You will have to get the icons name by copying the text after fa- and append it to x-icon- and add it to the class attribute, so you will get: class="x-icon-asterisk".

Then get the unicode value of the icon from fontawesome and append it to &#x so you will get &#xf069 for the data-x-icon atrribute.

$output .= '<a href="' . $new_icon1 . '" class="newicon" title="New Icon" target="_blank"><i class="x-icon-asterisk" data-x-icon="" aria-hidden="true"></i></a>';

Hope this gives you an idea what to do.

Bougioukos · November 28, 2017, 6:30pm

I already use pro child theme.
And of course you gave me a lot of ideas to try.
Thank you very veeerrryyy much.

nabeel · November 28, 2017, 10:10pm

Glad we could help.

Cheers!

system · December 8, 2017, 10:10pm

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.