1 ACCEPTED SOLUTION
Set the CSS to of the outer div containing the image to this
background: #1F8476;
display: inline-block;
border-radius: 100%;
width: 50px;
height: 50px;
object-fit: contain;
padding: 10px;and set the image css to this
height: 100%;
filter: brightness(0) invert(1);Note: You don't need to apply filter. I just did that to make it white. You can just upload a white Image.
Here is the output
I am able to get the image as icon now but it is not setting as circle box
Here is my final code
HTML:
<div class="iconlink" ng-class="{'high-contrast': accessibilityModeEnabled}">
<!--// Top Icon -->
<a ng-if="::(options.link_template == 'Top Icon' || !options.link_template)" ng-href="{{::data.href}}" class="top_icon {{::options.class_name}}" target="{{::data.target}}">
<div class="m-b fa fa-{{::options.glyph}} fa-4x {{::options.class_name}} text-{{::options.color}}"></div>
<h2>{{::options.title}}</h2>
<span class="text-muted">{{::options.short_description}}</span>
</a>
<!--// 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>
<!--// Color Box -->
<a ng-if="::(options.link_template == 'Color Box')" ng-href="{{::data.href}}" class="color_box {{::options.class_name}} icon-link-background-{{::options.color}} text-white" target="{{::data.target}}">
<div class="fa fa-{{::options.glyph}} fa-3x {{::options.class_name}}"></div>
<h2>{{::options.title}}</h2>
<span>{{::options.short_description}}</span>
</a>
</div>CSS:
.iconlink a label,h2 {
display: block;
font-size: 2.5rem;
font-weight: 300;
line-height: 1.1;
padding: 0;
margin: 0 0 10px 0;
}
/* TOP ICON ---------- */
a.top_icon {
display: block;
padding: 20px;
text-align: center;
}
a.top_icon .fa {
display: block;
text-align: center;
}
/* 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;
}
/* COLOR BOX ---------- */
a.color_box {
display: block;
position: relative;
padding: 20px 20px 20px 82px;
border-radius: 4px;
margin-bottom: 20px;
}
a.color_box .fa {
position:absolute;
left: 20px;
top: 20px;
width:42px;
text-align: center;
}
.icon-link-background-primary {
background-color: $brand-primary;
}
.icon-link-background-info {
background-color: $brand-info;
}
.icon-link-background-success {
background-color: $brand-success;
}
.icon-link-background-warning {
background-color: $brand-warning;
}
.icon-link-background-danger {
background-color: $brand-danger;
}
.icon-link-background-default {
background-color: $brand-primary;
}
.text-primary {
color: $brand-primary;
&:hover {
color: darken($brand-primary, 20%);
}
}
.text-info {
color: $brand-info;
&:hover {
color: darken($brand-info, 20%);
}
}
.text-success {
color: $brand-success;
&:hover {
color: darken($brand-success, 20%);
}
}
.text-warning {
color: $brand-warning;
&:hover {
color: darken($brand-warning, 20%);
}
}
.text-danger {
color: $brand-danger;
&:hover {
color: darken($brand-danger, 20%);
}
}
.text-default {
color: $brand-primary;
&:hover {
color: darken($brand-primary, 20%);
}
}
.high-contrast {
.text-primary {
color: darken($brand-primary, 10%);
}
.text-info {
color: darken($brand-info, 10%);
}
.text-success {
color: darken($brand-success, 10%);
}
.text-warning {
color: darken($brand-warning, 10%);
}
.text-danger {
color: darken($brand-danger, 10%);
}
.text-default {
color: darken($brand-primary, 10%);
}
}
Server:
(function(){
var gr = $sp.getInstanceRecord();
data.href = $sp.getMenuHREF(gr);
data.target = options.target || "";
var img = new GlideRecord('db_image');
img.addQuery('sys_id', options.image);
img.query();
if (img.next()) {
data.target = img.getValue('name');
}
})();
Object Schema:
[{"name":"link_template","section":"Presentation","label":"Template","type":"choice","choices":[{"label":"Top Icon","value":"Top Icon"},{"label":"Circle Icon","value":"Circle Icon"},{"label":"Color Box","value":"Color Box"},{"label":"Image Icon","value":"Image Icon"}]},{"name":"image","section":"other","label":"Image","type":"reference","value":"db_image","ed":{"reference":"db_image"}}]
Please let me know, how to get it same as oob circle icons.
Note: My code is Image Icon in HTML, and Image circle in css
