wp添加icon到菜单

Published
May 11, 2022
浏览次数 :  1

<?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";
}

Top