scss 社交菜单 - 根据锚点href自动设置FontAwesome图标

Posted 2021-05-18

<?php
wp_nav_menu(
	array(
		'theme_location'  => 'social-menu',
		'container'       => 'div',
		'container_id'    => 'menu-social-header',
		'container_class' => 'social-menu menu-social menu-social-header',
		'menu_id'         => 'menu-social-items',
		'menu_class'      => 'menu-items',
		'depth'           => 1,
		'link_before'     => '<span class="sr-only screen-reader-text">',
		'link_after'      => '</span>',
		'fallback_cb'     => '',
	)
);
?>

/* Social Menu */
.social-menu {
	display: inline-block;
	margin: 5px 0;
	vertical-align: top;

	ul {
		list-style: none;
		margin: 0;
		padding: 0;

		li {
			display: inline-block;
			margin: 0;

			&:not(:last-child) {
				margin: 0 20px 0 0;
			}

		}
	}

	a {
		font-size: 20px;
		line-height: 24px;
	}

}
.menu-social li a:before {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.menu-social li.dribbble a::before,
.menu-social li a[href*="dribbble.com"]::before {
	content: "\f17d";
}

.menu-social li.facebook a::before,
.menu-social li a[href*="facebook.com"]::before {
	content: "\f09a";
}

.menu-social li.flickr a::before,
.menu-social li a[href*="flickr.com"]::before {
	content: "\f16e";
}

.menu-social li.github a::before,
.menu-social li a[href*="github.com"]::before {
	content: "\f09b";
}

.menu-social li.googleplus a::before,
.menu-social li a[href*="plus.google.com"]::before {
	content: "\f0d5";
}

.menu-social li.instagram a::before,
.menu-social li a[href*="instagram.com"]::before {
	content: "\f16d";
}

.menu-social li.lastfm a::before,
.menu-social li a[href*="last.fm"]::before {
	content: "\f202";
}

.menu-social li.linkedin a::before,
.menu-social li a[href*="linkedin.com"]::before {
	content: "\f0e1";
}

.menu-social li.pinterest a::before,
.menu-social li a[href*="pinterest.com"]::before {
	content: "\f231";
}

.menu-social li.skype a::before,
.menu-social li a[href*="skype.com"]::before {
	content: "\f17e";
}

.menu-social li.spotify a::before,
.menu-social li a[href*="spotify.com"]::before {
	content: "\f1bc";
}

.menu-social li.stumbleupon a::before,
.menu-social li a[href*="stumbleupon.com"]::before {
	content: "\f1a4";
}

.menu-social li.tumblr a::before,
.menu-social li a[href*="tumblr.com"]::before {
	content: "\f173";
}

.menu-social li.twitter a::before,
.menu-social li a[href*="twitter.com"]::before {
	content: "\f099";
}

.menu-social li.vimeo a::before,
.menu-social li a[href*="vimeo.com"]::before {
	content: "\f27d";
}

.menu-social li.vine a::before,
.menu-social li a[href*="vine.co"]::before {
	content: "\f1ca";
}

.menu-social li.vk a::before,
.menu-social li a[href*="vk.com"]::before {
	content: "\f189";
}

.menu-social li.xing a::before,
.menu-social li a[href*="xing.com"]::before {
	content: "\f168";
}

.menu-social li.youtube a::before,
.menu-social li a[href*="youtube.com"]::before {
	content: "\f16a";
}