wp添加icon到菜单
Published
2022-05-11
浏览次数 : 193
<?php
wp_nav_menu( array(
'theme_location' => 'social-menu',
'container' => 'nav',
'container_class' => 'socials',
'container_id' => 'socials',
'link_before' => '<span class="sr-text">',
'link_after' => '</span>'
) );
?>
通过'link_before' => '<span class="sr-text">' 来使得导航的名称嵌入到span里面去,然后在css里面设置display none;
然后设置
用fontawesome在css 添加content, 添加unicode,
nav.socials ul li a[href*="facebook.com"]::before {
content: '\f09a';
}
See: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
font-family: "Font Awesome 5 Free"; // Solid 900
font-family: "Font Awesome 5 Pro"; // Solid/Regular/Light 900/400/300
font-family: "Font Awesome 5 Duotone"; // Duotone 900
font-family: "Font Awesome 5 Brands"; // Brands 400
.icon::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
content: "insert-fa-icon-code";
font-weight: "insert-font-weight";
font-family: "insert-font-family";
}
- 标签1
- 标签1
- 标签1