Social Icons not showing in Google Chrome

Hi Ross,
I just went to your site with my ipad using chrome, plus my iphone 8 with chrome; both showed the icons. Are you on Android? My guess is that the Android Chrome (if this is the one you are using) is not cooperating. The icons are SVG format.

Is your chrome mobile version up-to-date?

Just doing some quick looking on Google. It appears Android Chrome is problematic. I also came across this: Dealing with SVG…

It is on Android, but it’s also in the desktop version as well

i cleared my Cache again and it works now thanks.

is there anyway to change the colour of the icons? and the size and position?

Thanks

Ross

Just to confirm, your icons are not working even on your desktop chrome browser? I use chrome myself and they show up and have not heard of this happening to others.

This theme uses svg icons from Icomoon. I also just looked at your screenshots again and it appears, in the first one, not only are the social icons not showing, even the mobile menu icon is not showing. I’m assuming then that the magnifying glass icon on the search widget does not show either?

IF so, this is odd because it’s the first time someone has experienced this, and trying to figure out why you are having this happen, and only in Chrome.

ah…. cache! Cache can be a nasty thing and is very annoying to develop with even on my local computer because clearing it is a pain in the….

Anyway, yes, you can change the size and colour. What icons did you want to change? This can only be done to specific icons, or rather specific elements that uses the icon(s).

The social icons, wanted them a bit bigger and perhaps centered. Also either with a black outline or a change of colour.

Thanks ms for your help dude. I love the theme too

Rosco

also have all the menus in line at the top with my name?

Trying to figure out why your header elements are not centering but they do on my test site for the theme. Your menu in the header when using the Centered header style should be centered. My local site have my icons centered. I did notice though when using that header style, the logo (site title) should be centered but it’s not for me either. I will have to find out what is happening and fix this part.

But for styling the icons, this is the theme’s default styles which you would of course copy and put into the Additional CSS tab of your customizer:

.social-menu .social-icons-menu li a .icon {
    width: 24px;
    height: 24px;
    fill: #fff;
}

The fill: is the icon colour. You cannot do an outline around the icon itself, but the container you can by adding:

border: 1px solid #fff;

That creates a block bordered outline though that is 1px thick and white.

UPDATE: Couple questions for you…are you using any kind of a cache plugin or online cloud service? Also, did you make any changes to the theme’s style.css file?

also have all the menus in line at the top with my name?

All on one row? Check your header style by going to the customizer >> Theme Options >> Basic Settings >> Site Header Layout Style

Choose either the boxed or wide style.

By the way, to change the colour of your social icons in the footer, add this to your Additional CSS tab:

#footer-social-icons .social-icons-menu li a .icon {
    fill: #cc7217;
}

Update the colour to what you want.

NOTE: I used to have separate colour selectors for things like this in previous themes, but went with a more generalized concept where changing one colour will change various elements at the same time that use the same colour. But for all future themes, I now see it’s best to keep colour settings separate.

Thanks again,

i think it really depends on the user, i guess some people arent to bothered about colour customization and find it easier to have them grouped, for me i like to tweak this so they are more visually appealing or perhaps because they link up with a certain colour pallet for an image (E.G Yotube, Twitter)

I wioll give this a go now and see how i get on.

You are very welcome…hopefully it all works out for you.
Right now it’s 3 am for me so I am heading offline.

Cheers,
Andre

Perfect, it helps give me an understanding on how to change other things as well, on different pages i have noticed that the top bar is either orange, or displays the header picture really big(depending what i’ve selected), is this changeable as well either smaller picture like the home page or change the orange to the green im using? Perhaps through the same process of additional ccs, apologies if im bombarding you with questions, im still quite new to wordpress.

Thanks again,

Ross

This theme is setup to have different headers. The front page can have an image, while pages can have featured images added or no images (which shows the background colour), and then for the blog and full post (article) views, it uses the post’s featured image in the header. If no featured image exists, then the background colour is used and the height of the header will be a bit shorter in height.

The Pro version of this theme has more features and options, but regarding the header for this one, https://demos.bloggingthemestyles.com/typit/post-header-styles/ shows the different styles.

Not sure if you are aware of the setup tutorials for Typit, but if not, you can find them HERE

As for the questions, no need to apologize. Questions are important. Only thing I would suggest is that any new support questions you have that are a different topic, it’s best to post them as new topics…the moderators here at www.remarpro.com will request that.