Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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


Recommended Posts

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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

code.jpg

Link to comment

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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. 

Screenshot 2021-09-25 at 10.09.33.png

Add this CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...