我可以更改 zurb 基础顶部导航中下拉菜单上的三角形图像吗答案

【问题标题】：Can I change the triangle image on the drop down in the top-nav in zurb foundation我可以更改 zurb 基础顶部导航中下拉菜单上的三角形图像吗
【发布时间】：2014-01-31 09:40:53
【问题描述】：

我正在使用zurb foundation framework，我想将顶栏导航菜单上下拉菜单的三角形图像更改为齿轮。如何做到这一点？

【问题讨论】：

标签： ruby-on-rails drop-down-menu navigation zurb-foundation

【解决方案1】：

您使用的是原版 CSS 和 JS，还是 foundation gem？假设它是宝石进入foundation_and_overrides.scss 并使用以下方法删除三角形：

$topbar-arrows: false; //Set false to remove the triangle icon from the menu item

然后您可以添加自定义 css 以代替在那里放置一个 cog。下面是三角形的原始 css，它使用非常小的内嵌边框创建，如果您想确保匹配正确的边距等，

.top-bar-section .has-dropdown > a:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: inset 5px;
    border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent;
    border-top-style: solid;
    margin-top: -2.5px;
    top: 22.5px; }

编辑这里有一些 CSS 差不多了，除了 margin-right 被一些基金会的 css 覆盖...不过应该有所帮助

.top-bar-section .has-dropdown > a:after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  margin-right: 0px;
  background-image:url('https://cdn1.iconfinder.com/data/icons/imod/512/Hardware/pignon.png');
  background-size:15px 15px;
  background-repeat:no-repeat;
  background-position:center; 
}

【讨论】：