图标导航菜单答案

【问题标题】：Icon navigation menu图标导航菜单
【发布时间】：2018-01-09 19:51:26
【问题描述】：

我正在尝试在右侧的导航中添加一个区域，我只希望它包含三个图标，即购物篮、搜索和愿望清单。

有谁知道实现这一目标的最佳方法是什么？我目前在这个网站上使用 Divi 主题。

另外，我正在尝试使用图标而不是文本作为愿望清单的链接，但它似乎不起作用。我已经下载了字体真棒插件，并在自定义菜单标签中使用了以下代码。

&lt;i class="fas fa-heart"&gt;&lt;/i&gt;

谢谢。

【问题讨论】：

fas/far 适用于最新的 font-awesome 5 图标...fontawesome.com/get-started/web-fonts-with-css

标签： html css navigation icons

【解决方案1】：

试试这个我标记

<i class="fa fa-heart"></i>

【讨论】：

【解决方案2】：

您可以创建一个小部件并在菜单右侧定义小部件。在 function.php 中创建动态侧边栏。

在appearence --> widget中添加动态侧边栏作为小部件。在页面中添加动态侧边栏为

<?php dynamic_sidebar( 'sidebar name' ); ?>.

ul{
 list-style-type:none;
 padding:0
}
ul li{
display:inline-block;
}
ul li a{
 color:#000;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<ul>
  <li>
    <a href="#"><i class="fa fa-heart" aria-hidden="true"></i></a>
  </li>  
  <li>
     <a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a>
  </li>
  <li>
     <a href="#"><i class="fa fa-search" aria-hidden="true"></i></a>
  </li>
</ul>

【讨论】：

搜索功能是否仍然适用于此？另外，如果我这样做，我将如何使小部件显示在导航的左侧。
您可以将搜索 div 'et_top_search' 的 id 放在搜索图标中，可能它可以工作。您必须将侧边栏名称与 php 代码如 post 中所示一样。只需将其放在带有侧边栏的菜单代码之后您使用的名称。
对不起，我在 php 方面有点挣扎，我应该将 php 代码的顶部放在 function.php 文件中吗？
请您把说明贴得更清楚一点好吗？我不是最好的编码员，非常感谢，谢谢。
您可以通过此链接查看它templatemonster.com/blog/add-widget-areas-to-wordpress-guide