Tagged: ,

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • February 11, 2016 at 8:14 pm #581850
    NicomIT

    I need to increase the size of the social media icons being used in the header/nav area of the website I’m working on. I can increase them to around 35px, but if I go larger than that, they start to get cut off and don’t fit in the area they are contained in. I also need to add some additional space between each so they aren’t so close together and I can’t seem to get that to work.

    Lastly, I need to change the LinkedIn and Facebook icons to a square style icon. I followed the instructions in the video provided on how to download and import icons from Fontello. However, I can’t figure out how to actually use the two icons I imported in the CSS to replace the LinkedIn and Facebook icons currently being use. Any help with these couple of things would be great.

    February 11, 2016 at 9:37 pm #581880
    Basilis

    Hi NicomIT!

    Together with the size, please change the following
    width and line-height to the following class:
    #top .social_bookmarks li a

    let us know if that works

    Regards,
    Basilis

    February 12, 2016 at 3:43 pm #582281
    NicomIT

    Hi Basilis. I tried that, but it didn’t seem to change anything. Here is what I added (including a border so I could see the area around the icons when testing):

    #top .social_bookmarks li a {
	font-size: 45px;
	width: 100px !important;
	line-height: 30px !important;
	border: #F33 solid thin;	
}
    February 12, 2016 at 4:36 pm #582318
    NicomIT

    I was able to increase the size of the icons. Here’s the code that I used to do that:

    #top .social_bookmarks li a {
	width: 55px;
	line-height: 32px;
	min-height: 50px;
	font-size: 35px;
}

#top .social_bookmarks li {
	height: 100%;
	width: 55px;
}

    However I still can’t figure out how to change the LinkedIn and Facebook icons to a square style icons I downloaded from Fontello. Any help you can provide with that would be great.

    February 12, 2016 at 4:39 pm #582321
    Yigit

    Hey!

    Please refer to this post – http://kriesi.at/documentation/enfold/custom-social-icons/

    Best regards,
    Yigit

    February 12, 2016 at 4:42 pm #582325
    NicomIT

    Thanks Yigit. Is that code to be added to the functions.php file?

    February 12, 2016 at 5:08 pm #582343
    NicomIT

    I found this post, which makes me believe I am to add the code to the functions.php file.

    https://kriesi.at/support/topic/custom-social-bar-icons-replaceadd-enfold/

    I have successfully uploaded the .zip file I downloaded from Fontello and can see ‘Font: fontello’ listed under the Iconfont Manager area in “Import/Export”. But I’m still not seeing any new fonts when I go to the Social Profiles under the theme options. Am I missing a step or doing something wrong?

    February 12, 2016 at 5:43 pm #582359
    Yigit

    Hi!

    Yes, you should add the code to functions.php file and make adjustments on it depending on your icon. If you need help, please create a temporary admin login and post it here privately.

    Best regards,
    Yigit

    February 12, 2016 at 5:48 pm #582371
    NicomIT

    Thanks Yigit. I think I need some help. Login info is provided in the private content area.

    There are two icons that I downloaded from Fontello; ‘linkedin-squared’ from Font Awesome and ‘facebook-squared’ from Entypo. I’m trying to change the LinkedIn and Facebook icons in the logo area/header to those.

    February 12, 2016 at 6:14 pm #582394
    Yigit

    Hey!

    I adjusted the code in functions.php file and set your icons in Enfold theme options. Please review your website now.

    Best regards,
    Yigit

    February 12, 2016 at 6:24 pm #582404
    NicomIT

    Thanks Yigit. I see the new icons there now.

    Now that I see them in the website at a larger size, I can see they aren’t shaped quite the same. If I downloaded two different icons (facebook-rect and linkedin-rect from Web Symbols) do I need to change anything in the functions.php file to use those? Or do I just replace what I previously uploaded to the Iconfont Manager area?

    February 12, 2016 at 6:52 pm #582425
    Yigit

    Hey!

    If you name the icon font set the same, it should work. If it does not, let us know :)

    Regards,
    Yigit

    February 12, 2016 at 7:36 pm #582462
    NicomIT

    I just gave it a try and didn’t have any luck. The new icons are imported now and the name displayed under the Iconfont Manager is ‘fontello’, which I believe is what the name was for the original icons. If you could have a look, that would be great.

    February 12, 2016 at 7:41 pm #582467
    Yigit

    Hey!

    Another thing to check is Charcode. You can simply add your page an Icon element and hover on your icons to see charcodes – http://i.imgur.com/1bf39cp.png
    I fixed charcodes, please review your website now

    Best regards,
    Yigit

    February 12, 2016 at 7:50 pm #582476
    NicomIT

    Thanks Yigit. That worked great. Just one thing – I was able to increase the size of the icons slightly more than what I was able to originally as I mentioned earlier. But if you refresh the page now you will see the size they should be, which is a bit larger. You’ll see they are getting cut off in the area where they are displayed. I can’t seem to increase the size of that area to allow the full size of the current icons to fit. Do you know what needs to be adjusted to do that?

    February 12, 2016 at 7:59 pm #582481
    Yigit

    Hi!

    Please add following code to Quick CSS 

    #top .social_bookmarks {
    height: auto;
}
#top .social_bookmarks li a {
    line-height: 45px;
}

    That should help :)

    Best regards,
    Yigit

    February 12, 2016 at 8:04 pm #582485
    NicomIT

    That worked great. Thanks for all your help Yigit! As always, the support provided here is awesome!

    February 12, 2016 at 8:09 pm #582488
    Yigit

    Hey!

    You are welcome! Always happy to help :)
    Let us know if you have any other questions and enjoy your weekend!

    Regards,
    Yigit

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Using Different Social Media Icons & Adjusting Spacing/Size’ is closed to new replies.