php 社交菜单 - 根据锚点href自动设置FontAwesome图标
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了php 社交菜单 - 根据锚点href自动设置FontAwesome图标相关的知识,希望对你有一定的参考价值。
/* 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";
}
<?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' => '',
)
);
?>
以上是关于php 社交菜单 - 根据锚点href自动设置FontAwesome图标的主要内容,如果未能解决你的问题,请参考以下文章
php Divi社交菜单短代码
具有均匀间隔项目的水平菜单和动态可点击区域(锚点)
使用自动布局时,如何调整 CALayer 的锚点?
sketch字体设置技巧---通过锚点改变字体形态
php 自动社交媒体链接
PHP WordPress中的自动社交媒体链接