如何解决在服务门户中设计图标样式方面需要帮助
我正在Servicenow服务门户上工作,在那里我创建了一个自定义图标链接小部件,该控件将图像显示为字形图标。
我几乎拥有所有东西,但与字形图标相比,我的图像保持了原样。
/* CIRCLE ICON ---------- */
a.circle_icon {
display: block;
padding: 20px 0px 20px 70px;
position: relative;
}
a.circle_icon .fa {
position:absolute;
left: 0px;
top: 10px;
}
/* Image Circle ------- */
a.image_icon {
display: block;
padding: 20px 0px 20px 70px;
position: relative;
}
a.image_icon .fa {
position:absolute;
left: 0px;
top: 10px;
}
<!--// Circle Icon -->
<a ng-if="::(options.link_template == 'Circle Icon')" ng-href="{{::data.href}}" class="circle_icon {{::options.class_name}} text-{{::options.color}}" target="{{::data.target}}">
<span class="fa fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-{{::options.glyph}} fa-stack-1x fa-inverse"></i>
</span>
<h2>{{::options.title}}</h2>
<span class="text-muted">{{::options.short_description}}</span>
</a>
<!--// Image Icon -->
<a ng-if="::(options.link_template == 'Image Icon')" ng-href="{{::data.href}}" class="image_icon {{::options.class_name}} text-{{::options.color}}" target="{{::data.target}}">
<span class="fa fa-stack fa-2x">
<img src="{{data.target}}"/>
</span>
<h2>{{::options.title}}</h2>
<span class="text-muted">{{::options.short_description}}</span>
</a>
使用此代码,我的输出如下所示。 Click here
圆圈图标开箱即用,图像图标是我的自定义代码。我希望aeroplance图片的外观与上面的获得帮助和社区图标相同。
解决方法
我有几个跟您问的问题。
1。创建新窗口小部件的原因是什么? (而不是使用Icon链接OOB小部件)
我假设您想使用自定义图片代替 引导程序图标。 如果是,则有一个无需克隆的替代解决方案,您也可以使用自定义映像。 (在设计器中使用页面添加一个类,即write style [custom image css]就是这样,而无需克隆其可能性)
2。使用OOB Icon链接小部件,您可以使用实例选项进行操作,如果克隆了OOB Icon链接小部件,则可以转到实例选项添加修改,
该怎么做?
- 右键单击窗口小部件,转到实例选项。
- 滚动到最后一个字段,模板具有“圆形图标”选项
- 保存并完成(请参考下面的屏幕截图)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。