How to add an icon/image to the Buttons plugin?

Like those buttons on the right top (+ Plant, + Recipe, etc)

Took it from this reddit post: Reddit - Dive into anything

The author of the post responded in the comments, so I’ll just repeat it:
I will give an example of the styles for my “+ Daily” button.

First, I created the button and gave it the class “button-daily-note”:

    ```button
    name + Daily
    type command
    action Daily notes: Open today's daily note
    class button-daily-note
    ```

Then I styled the button like this:

    .button-daily-note {
      width:100px;
      height:100px;
      display:block;
      background-color:#17191c !important;
      position:absolute;
      top:-200px;
      right:0;
    }
    .button-daily-note::before {
      content:'ꇓ';
      color:#44b5c1;
      font-size:2.5rem;
      display:block;
      margin-bottom:10px;
      transition:all .2s ease-in-out !important;
    }
    .button-daily-note:hover::before {
      color:#3a3a3a;
    }

BTW, adding the block code to those Reddit comments is a real nightmare!

Wow! Thanks!
Also found out that you can insert images using inside button’s name property but you have to put a url link not a link to a local image.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.