需要帮助设置服务门户中的图标样式

Question

我在 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 图像看起来与上面相同 获取帮助和社区图标。

Answer 1

我有几个后续问题要问你。

1.创建新小部件的原因是什么？ （而不是使用图标链接 OOB 小部件）

我假设您想要一个自定义图像来代替 引导图标。 如果是的话，还有一个无需克隆的替代解决方案，您也可以使用您的自定义图像。 （在设计器中使用页面添加一个类，Write style[custom image css] 就是这样，没有克隆它的可能）

2.使用 OOB 图标链接小部件，您可以使用实例选项来执行此操作，如果您克隆了 OOB 图标链接小部件，您可以转到实例选项添加修改，

怎么做？

1. 右键单击小部件，转到实例选项。
2. 滚动到最后一个字段模板的底部有“圆形图标”选项
3. 保存并完成（请参阅下面的屏幕截图）