Download Pencil Icon
You first need to download the pencil icon and upload it to your theme.
Add to functions.php
Paste this into your functions.php file.
Make sure to change /img/edit_pencil.svg to the path of your own SVG. This function will add the provided CSS code to the head section of your site, making the custom edit icon styles available for use.
function custom_edit_icon_styles() {
$pencil_icon_url = get_template_directory_uri() . '/img/edit_pencil.svg';
?>
<style type="text/css">
.post-edit-link {
position: fixed;
width: 45px;
height: 45px;
left: 35px;
bottom: 35px;
text-indent: -9999px;
z-index: 2002;
background: url(<?php echo $pencil_icon_url; ?>) center center no-repeat #111;
background-size: 20px;
opacity: .2;
outline: 0;
-webkit-border-radius: 50%;
border-radius: 50%;
background-clip: padding-box;
transition: all 0.43s cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 0.43s cubic-bezier(0.42, 0, 0.58, 1);
-webkit-transition: all 0.43s cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 0.43s cubic-bezier(0.42, 0, 0.58, 1);
}
.post-edit-link:hover {
width: 51px;
height: 51px;
left: 32px;
bottom: 32px;
opacity: 1;
outline: none;
}
</style>
<?php
}
add_action('wp_head', 'custom_edit_icon_styles');Let me know if this helped. Follow me on Twitter, Facebook and YouTube, or 🍊 buy me a smoothie.