Skip to content

Instantly share code, notes, and snippets.

@neilgee
Created January 13, 2018 05:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save neilgee/054c8e4ca8cbc62208b00ccf15b9c6ac to your computer and use it in GitHub Desktop.
Save neilgee/054c8e4ca8cbc62208b00ccf15b9c6ac to your computer and use it in GitHub Desktop.
Diamond Background on Font Awesome Icons in Beaver Builder
/* Example - http://dev.inside.websitelove.com.au/ in the 'Find Us' row */
.find-us-row .fl-icon-wrap {
display: inline-block;
position: relative;
}
.find-us-row .fl-icon {
display: table-cell;
vertical-align: middle;
background-color: #000000;
transform: rotate(-45deg);
color: #fff;
width: 30px;
height: 30px;
position: absolute;
}
.find-us-row .fl-icon i {
float: left;
transform: rotate(45deg);
width: 100% !important;
height: 100% !important;
line-height: 1;
padding: 0;
text-align: center;
font-size: 10px !important;
position: relative;
top: 4px;
left: -4px;
}
.find-us-row .fl-icon-text {
display: table-cell;
text-align: left;
padding-left: 45px;
vertical-align: middle;
}
@media (max-width: 768px) {
.find-us-row .fl-module-icon {
text-align: left !important;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment