样式和资产
样式和资产
资产
属性中必须包含以下资产资产Zendesk Support中的布局模板以及应用列表和管理页面的文件夹:亚博
logo.png- 320px方形logo-small.png- 128px方形
将应用程序的任何额外资产放在资产文件夹中。接受的资产文件类型包括:.png， .jpg， .jpeg， .gif， .svg， .js， .htm， .html， .css， .map， .eot， .woff， .woff2， .otf， .ttf， .json， .xml， .hbs， .hdbs。
顶部栏，导航栏和票务编辑器图标
在顶部栏、导航栏或票务编辑器位置的应用程序有一个额外的图标，用户单击该图标就可以打开应用程序。要设置图标的样式以匹配任何Zendesk帐户的品牌颜色，请提供SVG。亚博
代码
您可以使用以下方法之一来编码SVG:
- 把所有的代码放在a中
svg < >标签。 - 使用
< >符号标记，为应用程序创建多个图标。
一个svg < >或< >符号标签需要包含viewBox属性。虽然该属性可以指定任何大小，但Zendesk CSS会将图像大小调整为18x18。亚博
<svgxmlns＝＂http://www.w3.org/2000/svg＂viewBox＝＂0 0 18 18＂><圆残雪＝＂9＂cy＝＂9＂r＝＂5＂/>svg>
如果你正在使用< >符号标签,viewbox属性上的< >符号标记，您需要指定一个< >符号有默认的随着id，以表示初始图标。
<svgxmlns＝＂http://www.w3.org/2000/svg＂><象征id＝＂默认的＂viewBox＝＂0 0 18 18＂><圆残雪＝＂9＂cy＝＂9＂r＝＂5＂/>象征><象征id＝＂mySymbol＂viewBox＝＂0 0 18 18＂><圆残雪＝＂3.＂cy＝＂3.＂r＝＂2＂/><圆残雪＝＂9＂cy＝＂9＂r＝＂2＂/><圆残雪＝＂15＂cy＝＂15＂r＝＂2＂/>象征>svg>
文件名称
SVG图标必须使用基于其应用程序位置的文件名。
| 应用程序位置 | 所需的文件名 |
|---|---|
| 导航栏 | icon_nav_bar.svg |
| 票编辑器 | icon_ticket_editor.svg |
| 窗口的顶部 | icon_top_bar.svg |
分级
你的图标将显示在18px * 18px，并填充6px，以填充一个30px * 30px的圆角框。
大小是通过编程处理的，因此您的SVG可以以任何大小提供，尽管我们建议在正方形画板上设计SVG，同时记住它可以显著缩小到18px x 18px。
州和为什么不使用填充颜色
图标的外观和悬停状态由Zendesk CSS处理。亚博不要通过添加填充色来覆盖Zendesk样亚博式。
例如，人们很容易使用填充色来突出应用图标。
<svgxmlns＝＂http://www.w3.org/2000/svg＂viewBox＝＂0 0 18 18＂><圆填满＝＂红色的＂残雪＝＂9＂cy＝＂9＂r＝＂5＂/>svg>
不要使用填充色。亚博Zendesk将使用与Zendesk图标相同的颜色为SVG着色。这保证了所有图标都具有相同的样式。由于图标的填充颜色是基于Zendesk品牌颜色生成的，因此硬编码会导致你的应用程序看起来与Zendesk不同实例上的Ze亚博ndesk图标不同。
因为元素上的元素属性优先于CSS中定义的填充颜色，所以你的悬停/活动颜色不会再改变(当使用填充颜色时)。
iconSymbolAPI
这个API允许您将图标设置为SVG的一部分。
客户端．集（“iconSymbol”，“mySymbol”）
您的SVG将需要更改为以下样式:
<svgxmlns＝＂http://www.w3.org/2000/svg＂><象征id＝＂默认的＂viewBox＝＂0 0 18 18＂><圆残雪＝＂9＂cy＝＂9＂r＝＂5＂/>象征><象征id＝＂mySymbol＂viewBox＝＂0 0 18 18＂><路径d＝＂M0 0h9v3H0zM0 7h18v3H0zM0 14h18v3H0zM15 3l3-3h-6＂/>象征>svg>
默认的用于表示所使用的初始图标。