Social icons in topbar to work with [x_icon type="facebook"]

[bollowollo]

hi,

i added the following code using the link: https://demo.theme.co/integrity-1/shortcodes/icons/

i added in them options > header > topbar.

do you guys have docs on the following:

1. increasing size of the icons,
2. adding links to the social media icons;
3. adding background colour & hover
4. centering everything .

your docs seemto only relate to .x-social-global?

thanks,

darryn

[christian]

Hey Darryn,

Regretfully, we don’t have documentation for those as they can be done if you have HTML and CSS knowledge. HTML and CSS are a huge topic and there are lots of resources available online where you can learn them like https://www.w3schools.com/ for example.

I’ll provide some examples to showcase what’s possible with the Icon Shortcode. Please note though that custom coding is beyond the scope of our support. We will not support issues arising from the use of custom code including custom HTML and CSS.

1. Increasing the size of icons

This can be done using Style attribute of the Icon Shortcode (e.g. [x_icon type="adjust" style="font-size:2em"]). You can insert any CSS declarations inside the style attribute. It’s basically just an inline style interface.

2. adding links to the social media icons

This involves HTML. Specifically, wrapping the Icon Shortcode with the Anchor Tag (e.g. <a href="#">[x_icon type="adjust" style="font-size:2em"]</a>).

3. adding background colour & hover

This still requires CSS but it’s best achieved using a Class especially that the hover part can only be possible using this method. What I mean by that is you assign a Class to the Icon shortcode (e.g. [x_icon type="adjust" style="font-size:2em" class="my-icon-style"]) and target that externally like adding the CSS code in Theme Options > CSS. The CSS should look like the following.

.my-icon-style {
  background: red;
}
.my-icon-style:hover {
  background: blue;
}

4. centering everything

This also requires CSS. I can’t provide an example for this one as this involves modifying the structure of the header. If you’re not a coder or don’t have time to learn HTML and CSS, I’d recommend you consult with a developer.

For all your concerns in this thread though, I’d strongly recommend you upgrade to our Pro theme because it has a Header builder. Specifically, you can use the Social Element which has the options (size, background, hover, link and more) you need just in one element. Best of all, you don’t need to code.

I know that sounds salesy but that’s just a fact. X has a few header options but that is understandable as it’s a theme. Custom coding is required to achieve a different look and we got a lot of custom coding requests in the past so Pro was created to make the changes possible without custom coding. With Pro, X is transformed into a site builder rather than just a theme.

Hope that helps and thank you for understanding.

[bollowollo]

Hey Christian,

Thanks so much. You have helped me so much. I will get to work on that.

I would love to upgrade to Xpro. I’ve always used Avada, but it’s quite a bloated site and prefer X Theme, but always get too bogged down by the extra coding. It’s good to know X Pro offers this.

I’ll definitely look at it when financial matters improve.

Thanks again,

Darryn

[ruenel]

You’re welcome!
We’re glad @Christian were able to help you out.