Need help changing round images at bottom

  • Resolved alexisrrmiller

    (@alexisrrmiller)


    9 years, 9 months ago

    Hi there,

    I’m using the Swell Lite template and I’m struggling to change the images in the circles in the gray footer at the bottom. I understand they’re font awesome logos and I’ve found where I can edit them in the code. The problem I’m running into is being able to differentiate them. If I change the icon to one images, it changes all of the circles to the same image. I’d like to be able to make them all different images.

    Maybe I’m not looking in the right place?

    Any help or advice on this matter would be greatly appreciated.

    https://wifeinthewildblueyonder.com/wp/

    .social-icons li a::before {
	font-family: 'FontAwesome';
	font-size: 16px;
	font-weight: normal;
	content: '\f015';
	}

.social-icons li a span {
	display: none;
	}
.social-icons li a[href*="facebook.com"]::before 		{ content: '\f09a'; }
.social-icons li a[href*="twitter.com"]::before  		{ content: '\f099'; }
.social-icons li a[href*="plus.google.com"]::before 		{ content: '\f0d5'; }
.social-icons li a[href*="linkedin.com"]::before	 	{ content: '\f0e1'; }
.social-icons li a[href*="github.com"]::before		 	{ content: '\f113'; }
.social-icons li a[href*="dribbble.com"]::before		{ content: '\f17d'; }
.social-icons li a[href*="foursquare.com"]::before		{ content: '\f180'; }
.social-icons li a[href*="pinterest.com"]::before		{ content: '\f0d2'; }
.social-icons li a[href*="wordpress.com"]::before		{ content: '\f19a'; }
.social-icons li a[href*="youtube.com"]::before			{ content: '\f16a'; }
.social-icons li a[href*="vine.co"]::before			{ content: '\f1ca'; }
.social-icons li a[href*="instagram.com"]::before		{ content: '\f16d'; }
.social-icons li a[href*="stackexchange.com"]::before		{ content: '\f18d'; }
.social-icons li a[href*="mailto:"]::before			{ content: '\f0e0'; }
.social-icons li a[href$="/feed/"]::before			{ content: '\f09e'; }
Viewing 4 replies - 1 through 4 (of 4 total)

  • So instead of pointing to an external social media site, each one of the circles points to a different page on your site. In fact, the links are menu links, and each menu link has a unique class name associated with it. You can see the unique class name if you do a view source on the page or if you use a web debugging tool like Firebug or Chrome Developer Tools. For example, the very last button, which points to your contact page, has a class of menu-item-136. You can therefore use this unique class name to target your CSS to a specific button.

    Before you get started, you don’t want to edit any of the theme files directly, so if your theme doesn’t have a custom CSS option, then activate the Custom CSS option in Jetpack by going to Jetpack → Settings.

    If you’re using Jetpack’s Custom CSS option, then go to Appearance → Edit CSS and copy & paste this rule to the end of the CSS Editor field:

    .social-icons li.menu-item-136 a::before {
   content: '\f040';
}

    You should see the icon for the contact button change to a pencil.

    The classes for all of the buttons are:
    menu-item-22: Home
    menu-item-23: About
    menu-item-158: Archives
    menu-item-64: Resources
    menu-item-136: Contact

    So just duplicate the first rule for each of the other buttons and change the menu-item number and the Font Awesome escape code to the one that you want.

    Thread Starter alexisrrmiller

    (@alexisrrmiller)

    This helped so much! Thank you for your thorough and very helpful advice.

    You’re welcome. The only other advice I have is that you should consider using permalinks instead of the default WordPress naming convention for your pages & posts. That way, your addresses will look something like:

    https://wifeinthewildblueyonder.com/wp/about

    instead of

    https://wifeinthewildblueyonder.com/wp/?page_id=2

    You can set the permalink style by going to Settings → Permalinks.

    thank you so much.it was great ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Need help changing round images at bottom’ is closed to new replies.