Skip to content

Instantly share code, notes, and snippets.

@RevConcept
Created March 4, 2014 23:35
Show Gist options
  • Save RevConcept/9358067 to your computer and use it in GitHub Desktop.
Save RevConcept/9358067 to your computer and use it in GitHub Desktop.
Adding custom icons to ACF radio buttons.
/* ===========================================
Radio Button Icons in Admin for ACF
=============================================*/
function sr_acf_radio_style() {
echo '<link rel="stylesheet" href="' . plugins_url( 'css/jazz.css', __FILE__) . '" type="text/css" media="screen" />';
}
add_action('admin_head', 'sr_acf_radio_style');
@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon.eot?-wdeksb');
src:url('../fonts/icomoon.eot?#iefix-wdeksb') format('embedded-opentype'),
url('../fonts/icomoon.woff?-wdeksb') format('woff'),
url('../fonts/icomoon.ttf?-wdeksb') format('truetype'),
url('../fonts/icomoon.svg?-wdeksb#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[id^="acf-field-page_icon-"], [id*="acf-field-page_icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
ul.acf-radio-list li input[id^="acf-field-page_icon-"], ul.acf-radio-list li input[id*="acf-field-page_icon-"] {
margin-right: 24px !important;
}
[id^="acf-field-page_icon-"]:after, [id*="acf-field-page_icon-"]:after {
position: absolute;
top: 4px;
left: 20px;
font-size: 18px;
}
.acf-radio-list label {
position: relative;
}
#acf-field-page_icon-house:after {
content: "\e600";
}
#acf-field-page_icon-video:after {
content: "\e600";
}
#acf-field-page_icon-users:after {
content: "\e601";
}
#acf-field-page_icon-user:after {
content: "\e602";
}
#acf-field-page_icon-heart:after {
content: "\e603";
}
#acf-field-page_icon-chat:after {
content: "\e604";
}
#acf-field-page_icon-calendar:after {
content: "\e605";
}
#acf-field-page_icon-bulb:after {
content: "\e606";
}
#acf-field-page_icon-time:after {
content: "\e607";
}
#acf-field-page_icon-gear:after {
content: "\e608";
}
#acf-field-page_icon-book:after {
content: "\e609";
}
#acf-field-page_icon-bank:after {
content: "\e60a";
}
#acf-field-page_icon-pie:after {
content: "\e60b";
}
#acf-field-page_icon-pdf:after {
content: "\e60c";
}
#acf-field-page_icon-new:after {
content: "\e60d";
}
#acf-field-page_icon-info:after {
content: "\e60e";
}
#acf-field-page_icon-house:after {
content: "\e60f";
}
#acf-field-page_icon-graph:after {
content: "\e610";
}
#acf-field-page_icon-form:after {
content: "\e611";
}
#acf-field-page_icon-email:after {
content: "\e612";
}
#acf-field-page_icon-directory:after {
content: "\e613";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment