How to Customize the Icon Field

This article provides a few tips and tricks to customize the icon field.

Removing the Icon 

We can use the following CSS to hide the icon for a text-only look

/* no icoon, and extra text */
.iconfield .iconfield-icon{
display:none;
}

Showing larger text or multiple Lines of text

The icon field supports 2 lines of text by default. You can add additional lines of text and additional formatting by adding some HTML and CSS. 

The easiest way would be to just add the <BR> tag within each field value row either in the line 1 column or line 2 column. The <BR> tag will add a line break.

This would add an addition line of text after the <BR>

Using CSS Classes to manage the Icon Fields Content

For a more flexible implementation, we recommend you use CSS classes and CSS rules to style the icon fields. 

We recommend getting your text/image layout with CSS/HTML working outside of Logiforms and once it is layed out how you want it, move the CSS into the Custom CSS property and update the IconField Field Values with the HTML.

You can use .iconfield() to target the icon field elements or use the inspector and get the field ID if you want to style multiple IconFields differently on the same form.

Default HTML Structure per icon

div class="btn btn-default iconfield large" id="field_1532795593253_22-1-icon">
<div class="iconfield-content">
      <div class="iconfield-icon fa fa-home fa-5x"></div>
      <div class="main">Main Text</div>
    </div>
    <div class="sub">Sub Text</div>
</div>

Sample HTML

For our example, we entered this HTML in the Icon Fields Field Values > Line 1. By using HTML in the field value property we were able to add multiple lines each with unique styles via the class attribute (and the CSS shown below)

<div class="visitors">5,000</div>
<div class="v">Visitors</div>
<div class="price">$19.95 <span>/mo</span></div>

Sample CSS

This CSS applies to the Sample HTML above that we used in the Field Value of the Icon Field

/* Price */
.iconfield.large .main .price {
    font-size: 22px;
    font-weight:bold;
}
.iconfield.large .main .price span{
    font-size: 12px;
    font-weight:normal;
}
.iconfield.large .main .price {
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}
/* number of visitors per month */
.iconfield.large .main .visitors{
    font-size: 35px;
    font-weight:bold;
    text-align:center;
    align:center;
    display: block;
}
/* smaller "visitors" text */
.iconfield.large .v{
    font-size: 12px;
    font-weight:normal;
    align:center;
    display: block;
}
/* change color of sub line */
.iconfield.large .sub {
    font-size: 12px !important;
    color:#34495e;
}
/* modify the minimum width */
.iconfield.large {
    min-width: 235px !important;
}

The CSS and HTML provided, will result in this example:

#field_1532795593253_22field_div .iconfield.large .main {
    font-size: 16px;
}
#field_1532795593253_22field_div .iconfield.large .sub {
    font-size: 13px;
}
/* customized */
/* no icoon, and extra text */
#field_1532795593253_22field_div .iconfield .iconfield-icon{
    display:none;
}
/* Price */
#field_1532795593253_22field_div .iconfield.large .main .price {
    font-size: 22px;
    font-weight:bold;
}
#field_1532795593253_22field_div .iconfield.large .main .price span{
    font-size: 12px;
    font-weight:normal;
}
#field_1532795593253_22field_div .iconfield.large .main .price {
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}
/* number of visitors per month */
#field_1532795593253_22field_div .iconfield.large .main .visitors{
    font-size: 35px;
    font-weight:bold;
    text-align:center;
    align:center;
    display: block;
}
#field_1532795593253_22field_div .iconfield.large .v{
    font-size: 12px;
    font-weight:normal;
    align:center;
    display: block;
}
/* change color of sub line */
#field_1532795593253_22field_div .iconfield.large .sub {
    font-size: 12px !important;
    color:#34495e;
}
/* modifying the size (if you have it set to large, you can use this css ) */
#field_1532795593253_22field_div .iconfield.large {
    min-width: 235px !important;
}