I want to add some style to my drupal 8 Sidebar menu, I want to create something like below image with Font awesome and css:
enter image description here


You can do this thing entirely using the CSS and FontAwesome module, I have just tried in my trial site and posting the image of block title as below, I guess you are looking for the same.

enter image description here

The CSS code I have used is as below,

#block-yourblockID {
    .block-title {
      font-size: 20px;
      margin: 0 0 0 0;
      padding: 0 0 0 70px !important;
      background: #0166c3;
      color: #fff;

  .block-title:after {
     font-family: FontAwesome;
     content: "\f100";
     float: right;
     background: #0156a2;
     padding: 0 5px 0 5px;
     color: #fff;
     } }

Now, for your title and its content you can adjust padding and margin for your fit. Also you can adjust the padding and margin of block to fit the entire title same as block width.

| improve this answer | |
  1. First add position: relative as a style to the containing element (most likely the nav element.
  2. Add a pseudo element after the h2 element, which you probably want to have your specificity include the class of the nav element.
  3. Style the pseudo element with position: absolute; right: 0;
  4. Tweak the styles of the h2 and h2:after blocks to suit your needs.
| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.