自定义箭头向上/向下手风琴垂直菜单基础6

Question

如何在手风琴垂直菜单的Foundation 6中将标准箭头（向上/向下）更改为自定义图标箭头上/下？

谢谢。

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，某些html entity或其他任何内容：

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

    // HTML entity: 
    content:"\003e"; 
}

快乐探索：）

Answer 2

要使其与 Font Awesome 一起使用，您需要在 CSS 中添加：

font-family: "Font Awesome";

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

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