在服务门户中设计图标样式方面需要帮助

问题描述

我正在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链接小部件，则可以转到实例选项添加修改，

该怎么做？

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

bootstrap-4 glyphicons html servicenow