Social Menu Icons

How can I get the Google “G” icon to appear in the Social Menu pre-header position?

The Facebook icon automatically appears when creating a Custom Link to a Facebook fan page.

But this doesn’t happen for the Google icon. If I can’t force the icon, how do I find the appropriate Google Plus business listing - that will automatically cause the Google icon to appear?

Thank you much. The Google link in the Social Menu works. It links to the Business listing link I specified. But the icon does not appear. It is currently an invisible link.

http://northvalleyjanitorial.com

Here is the top of the Home Page viewed on a computer:

You can see the Facebook Icon. But you cannot see the Google Icon.

Here is the top of the Home Page viewed on my iPhone:

Can you help me? Thank you.

Hello there,

It doesn’t appear as the current Google Map link doesn’t match with the one defined in the main stylesheet. Ideally it should contain either plus.google.com or google.com/+

However to make it works with Google Map URL, you can display it by adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .social-links a[href*="google.com"]::before {
       content: '\f0d5';
    }

Regards,
Kharis

Thank you Kharis. The code works. Since Google is migrating Google Plus to individuals and migrating businesses to Google Businesses - wouldn’t it make sense that the Google Icon in the theme follow suit? Or am I missing something?

Also, I can’t find my clients Google Plus URL for the life of me. I know I am supposed to be the professional, but I simply can’t find. Any advice? Thank you again.

Hello there,

Read it on this documentation page:

https://support.google.com/plus/answer/2676340

Regards,
Kharis

Good day, Kharis. At the top of the page of the link provided Google is announcing that as of April 2nd this year it is shutting down Google+.

Perhaps the theme should be updated? To reflect this change? And not require Custom Code to display the G+ icon?

I am getting cross-eyed with the extensive Additional Custom CSS Code that needs to be used with the theme to accomplish what should be normal functions/settings within the Pro version of the theme itself. As I have many times in the past recommended specific updates to the theme, etc.

Thank you. I still really like the theme. I plan to renew this year. But I sure wish I didn’t need to add so much additional code.

Here is the code I currently have installed on a new site I am building:

@media only screen and (max-width: 1024px) {
.header-contact {
padding-top: 3px;
padding-bottom: 3px;
}
.header-contact .social-links {
margin-top: 0;
}
}

.header-contact,
.header-contact a,
.header-contact .fa,
.has-hero .header-contact,
.has-hero .header-contact a,
.has-hero .header-contact .fa {
color: #000000;
}

.social-links a[href*=“google.com”]::before {
content: ‘\f0d5’;
}

.header-contact .fa,
.has-hero .header-contact .fa {
  color: #000D80;

}

.social-navigation a {
color: #000D80 !important;
}

.social-navigation a:hover {
  color: #ffffff !important;

}

@media only screen and (max-width: 767px) {
header#masthead div.col-md-4.col-sm-8.col-xs-12 {
max-width: 72%;
}

header#masthead div.col-md-4.col-sm-8.col-xs-12,
header#masthead div.col-md-8.col-sm-4.col-xs-12 {
    width: auto;
}

header#masthead div.col-md-8.col-sm-4.col-xs-12 {
    float: right;
    padding: 1px 20px;
}

header#masthead nav#mainnav-mobi {
    left: -215px;
    width: 250px;
}

}

@media (max-width: 767px) {
#masthead {
padding: 5px 0 9px;
}
}

.btn-menu {
line-height: 28px;
}

.mainnav ul.menu .current-menu-item > a,
.mainnav ul.menu .current-menu-ancestor > a {
color: #000D80 !important;
}

#mainnav-mobi ul > li > a {
color: #ffffff;
}

#mainnav-mobi {
background-color: #b5b5b5;
}

#slideshow .text-slider {
animation-delay: 2s;
}

.text-slider h2.maintitle {
background-color: rgba(0,13,128,0.5);
padding-bottom: 20px;
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
border-radius: 3px;
line-height: 1;
}

.text-slider p.subtitle {
  display: table;
  padding-bottom: 5px;
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  background-color: rgba(0,13,128,0.3);  
  border-radius: 3px;

}

.page-template-elementor_header_footer .page-wrap,
.page.page-template-elementor_header_footer .page-wrap .content-wrapper{
padding-top: 0;
padding-bottom: 0;
}

html,
body {
overflow-x: hidden;
}

@media only screen and (max-width: 760px) {

  div[data-id="b0f104c"] {
    background-color: #fff;
    border-radius: 4px;
  }

  a.elementor-button {
    display: block !important;
    text-align: center;
  }
  
  a.elementor-button  .elementor-align-icon-left {
    float: none;
  }

  a.elementor-button *,
  a.elementor-button a {
    display: inline !important;
  }  
}

a.elementor-button span.elementor-button-icon.elementor-align-icon-left {
float: unset;
}

.site-info {
font-size: 12px;
}

It is my humble opinion that ALL of these mods to the theme should be controllable in the theme settings - especially the Pro version. Thoughts?

I agree with you. However we can’t remove it immediately as some other users might not notice it and we won’t hide their icons without any consent. Deletion is totally on their hands.

Regards,
Kharis