как добавить шрифт-удивительный значок в WordPress wp_nav_menu()

nav menu image как добавить шрифт-удивительный значок в WordPress wp_nav_menu()

Я пытаюсь показать это меню в WordPress с помощью wp_nav_menu(); но из-за меньшего количества знаний я не могу понять, как это сделать. любезно помогите мне и, пожалуйста, обменивайтесь кодом, если у вас есть идеи.

<div class="pull-left"> 
<nav> 
<ul class="sf-menu sf-js-enabled sf-shadow l_tinynav1" id="nav"> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>" class="first-level-link sf-with-ul"> 
        <div class="menu-icon"><i class="icon-home icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">Home</div> 
        </div> 
        </a> </li> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=4" class="first-level-link"> 
        <div class="menu-icon"><i class="icon-user icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">About Us</div> 
        </div> 
        </a> </li> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=6" class="first-level-link"> 
        <div class="menu-icon"><i class="icon-cogs icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">Services</div> 
        </div> 
        </a> </li> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=8" class="first-level-link"> 
        <div class="menu-icon"><i class="icon-briefcase icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">Projects</div> 
        </div> 
        </a> </li> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=10" class="first-level-link"> 
        <div class="menu-icon"><i class="icon-key icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">Careers</div> 
        </div> 
        </a> </li> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=12" class="first-level-link"> 
        <div class="menu-icon"><i class="icon-comments icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">FAQ</div> 
        </div> 
        </a> </li> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=14" class="first-level-link"> 
        <div class="menu-icon"><i class="icon-envelope-alt icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">Contact</div> 
        </div> 
        </a> </li> 
       </ul> 
</nav> 
</div>

Теперь я использую это, но его статические и еще одна вещь, я также сталкиваюсь с проблемой активного меню. пожалуйста, поделитесь кодом со мной или telme, как я могу добавить активный класс в статичное меню, которое нужно нажать, чтобы показать, что это ваша позиция сейчас.

источник

2014-09-10 Muddasir Abbas

<div class="pull-left"> 
       <nav> 
       <ul class="sf-menu sf-js-enabled sf-shadow l_tinynav1" id="nav"> 
        <?php echo $page_id = $post->ID; ?> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>" class="first-level-link <?php if(is_home()){ echo "active"; }?> sf-with-ul"> 
        <div class="menu-icon"><i class="icon-home icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">Home</div> 
        </div> 
        </a> </li> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=4" class="first-level-link <?php if($page_id==4){echo "active";}?> "> 
        <div class="menu-icon"><i class="icon-user icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">About Us</div> 
        </div> 
        </a> </li> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=6" class="first-level-link <?php if($page_id==6){echo "active";}?>"> 
        <div class="menu-icon"><i class="icon-cogs icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">Services</div> 
        </div> 
        </a> </li> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=8" class="first-level-link <?php if($page_id==8){echo "active";}?>"> 
        <div class="menu-icon"><i class="icon-briefcase icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">Projects</div> 
        </div> 
        </a> </li> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=10" class="first-level-link <?php if($page_id==10){echo "active";}?>"> 
        <div class="menu-icon"><i class="icon-key icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">Careers</div> 
        </div> 
        </a> </li> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=12" class="first-level-link <?php if($page_id==12){echo "active";}?>"> 
        <div class="menu-icon"><i class="icon-comments icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">FAQ</div> 
        </div> 
        </a> </li> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=14" class="first-level-link <?php if($page_id==14){echo "active";}?>"> 
        <div class="menu-icon"><i class="icon-envelope-alt icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">Contact</div> 
        </div> 
        </a> </li> 
       </ul> 

       </nav> 
      </div>

активный класс добавлен используя пользовательский код.

источник

2014-09-11 10:48:39

Предполагая, что вы используете разметку выше, вы можете просто изменить классы icon-key icon-large, чтобы отобразить их в FontAwesome.

Например, «домашний» значок, который представлен в доме. Итак, просто замените icon-home icon-large на fa fa-home.

Список значков FontAwesome доступен here, нажмите один, чтобы увидеть его класс.

Если вы хотите использовать динамическое меню, то wp_nav_menu, вероятно, не для вас. Вам может быть проще создать собственный, используя wp_get_nav_menu_items. Существует яркий пример того, как именно это сделать.

источник

2014-09-10 13:02:40 Mike

Я использую вышеупомянутую разметку, и ее показы точно такие же, как в wordpress, но ее статический код, я думаю, теперь проблема в том, что когда я вызываю меню динамически, используя wp_nav_menu(); то иконки не показывались. и еще одна вещь, если у вас есть представление о том, как добавить активный класс в выше html-код, любезно поделитесь со мной. Благодарю. –

В этом случае вам необходимо внести изменения в разметку. Самый простой способ сделать это - создать меню самостоятельно, используя [wp_get_nav_menu_items] (http://codex.wordpress.org/Function_Reference/wp_get_nav_menu_items). Я отредактирую ответ, чтобы это отразить. – Mike

Этот процесс в настоящее время прост.

Перейдите на панель инструментов Wordpress, затем выберите внешний вид-> редактор и выберите файл заголовка header.php.

добавить эту строку в секции заголовка:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

после добавления вышеуказанной строки перейдите в appearance-> меню, а затем добавить коды Fa значок рядом с вами пунктов меню

<i class="fa fa-home" aria-hidden="true"></i>

надеюсь, что это помощь

источник

2016-04-21 21:52:45 jfindley

как добавить шрифт-удивительный значок в WordPress wp_nav_menu()

ответ

Смежные вопросы