.grid-demo .row {
  text-align: center;
  +.row {
    margin-top: 0.75rem;
  }
  > [class*=col-] {
    border: 1px solid #ddd;
  }
}

@imgBaseUrl: "../img";
.icons-demo .icon {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0.15rem;
  font-size: 1.2rem;
  line-height: 2.5rem;
  text-align: center;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 1.25rem;
  display: inline-block;
}
.icon {
    &.icon-f7 {
        width: 1.45rem;
        height: 1.45rem;
        background-image: url("@{imgBaseUrl}/i-f7.png");
    }
    &.icon-form-name {
        width: 1.45rem;
        height: 1.45rem;
        background-image: url("@{imgBaseUrl}/i-form-name.png");
    }
    &.icon-form-password {
        width: 1.45rem;
        height: 1.45rem;
        background-image: url("@{imgBaseUrl}/i-form-password.png");
    }
    &.icon-form-email {
        width: 1.45rem;
        height: 1.45rem;
        background-image: url("@{imgBaseUrl}/i-form-email.png");
    }
    &.icon-form-calendar {
        width: 1.45rem;
        height: 1.45rem;
        background-image: url("@{imgBaseUrl}/i-form-calendar.png");
    }
    &.icon-form-tel {
        width: 1.45rem;
        height: 1.45rem;
        background-image: url("@{imgBaseUrl}/i-form-tel.png");
    }
    &.icon-form-gender {
        width: 1.45rem;
        height: 1.45rem;
        background-image: url("@{imgBaseUrl}/i-form-gender.png");
    }
    &.icon-form-toggle {
        width: 1.45rem;
        height: 1.45rem;
        background-image: url("@{imgBaseUrl}/i-form-toggle.png");
    }
    &.icon-form-comment {
        width: 1.45rem;
        height: 1.45rem;
        background-image: url("@{imgBaseUrl}/i-form-comment.png");
    }
    &.icon-form-settings {
        width: 1.45rem;
        height: 1.45rem;
        background-image: url("@{imgBaseUrl}/i-form-settings.png");
    }
    &.icon-form-url {
        width: 1.45rem;
        height: 1.45rem;
        background-image: url("@{imgBaseUrl}/i-form-url.png");
    }
}