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

closed as off-topic by Pierre.Vriens, Adrian Cid Almaguer, Shawn Conn, Krishna Mohan, sanzante Jul 11 '16 at 6:15

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions on programming, PHP, SQL, etc. that do not relate directly to Drupal are off-topic here, but can be asked on Stack Overflow." – Pierre.Vriens, Adrian Cid Almaguer, Shawn Conn, Krishna Mohan, sanzante
If this question can be reworded to fit the rules in the help center, please edit the question.


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.

  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.

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