自定义箭头 up/down 手风琴垂直菜单基础 6

Question

如何在 Foundation 6 中将手风琴垂直菜单的标准箭头 (up/down) 更改为自定义图标箭头 up/down？

谢谢。

Answer 1

查看 Accordion 的源代码后，您可以更改箭头的 content 属性 并覆盖 Foundation 的默认设置。这是 Foundation's Docs 中的默认值 属性：

.accordion-title::before {
    position: absolute;
    top: 50%;
    right: 1rem;
    margin-top: -0.5rem;
    content: '+';
}

因此，将 content 属性 更改为您喜欢的任何内容 - Font Awesome, some html entity 或其他任何内容：

.accordion-title::before {
    // Font Awesome implementation:
    content: "\f000";

    // HTML entity: 
    content:"[=11=]3e"; 
}

探索愉快:)

Answer 2

要使其与 Font Awesome 一起使用，您需要添加 CSS:

font-family: "Font Awesome";

此后您可以添加额外的参数，例如：

font-style: normal;
font-size: 20px;