Flatiron - Anyone know how to get the social icon links to the top?

Site URL: http://alextreadway.co.uk/

So does anyone know how to get the social icon links at the top in the Flatiron template? Next to the navigation? 

On 9/16/2021 at 3:36 AM, Pocamuffin said:

Site URL: http://alextreadway.co.uk/

So does anyone know how to get the social icon links at the top in the Flatiron template? Next to the navigation? 

 

 

Hi,

Which icons you want to add to top?

Hi, the Instagram icon which is currently bottom right. Is there any way to move that to the top? www.alextreadway.co.uk

On 9/17/2021 at 2:42 PM, Pocamuffin said:

Hi, the Instagram icon which is currently bottom right. Is there any way to move that to the top? www.alextreadway.co.uk

Hi,

2 options to do this

Option 1. (Business Plan or higher). Use script code to move it from bottom right to your desired position

Option 2. (Personal Plan) Follow these steps

2.1. Edit Site Footer >> Add a Code Block in Instagram position >> Paste this code

Quote

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">

2.2. Add a Link Item in Main Navigation, after ALEX with

• Name: IN
• URL: https://www.instagram.com/alextreadway/

2.3. When you're done, let me know. We will give the code to change IN text to Instagram icon

Hi,

(option 2)

I've added the Code Block to the footer. It's not possible to put this code block where the social icon is currently positioned. Will this work? I've added the 'IN' link to the navigation. Screen grab here showing code block position. 

Many thanks for your help. 

Alex

Add to Design > Custom CSS

header#topBar a[href*="instagram"]:before {
    content: "\f16d";
    font-family: "Font Awesome 5 Brands";
    visibility: visible;
}
header#topBar a[href*="instagram"] {
    visibility: hidden;
}

Hi Tuaphan, thanks for your help on this it's almost perfect. The only glitch is on mobile the Instagram logo is slightly off centre. Any way to force it to centre? Thanks again. 

23 hours ago, Pocamuffin said:

Hi Tuaphan, thanks for your help on this it's almost perfect. The only glitch is on mobile the Instagram logo is slightly off centre. Any way to force it to centre? Thanks again. 

Add this CSS

@media screen and (max-width:640px) {
header#topBar a[href*="instagram"]:before {
    display: block;
}
}