Veriael Could you explain more, maybe provide something like step by step tutorial?

Here is the CSS, in order for each (Home, Following, Members)

Just add to the Custom CSS under Appearances.

.item-link3 .LinksButton.Button.Button--link::before {
    content: "\f015";
    font-family: fontawesome;
    padding-right: 5px;
    font-size: 15px;
}

.item-link1 .LinksButton.Button.Button--link::before {
    content: "\f005";
    font-family: fontawesome;
    padding-right: 5px;
    font-size: 15px;
}
.item-link2 .LinksButton.Button.Button--link::before {
    content: "\f007";
    font-family: fontawesome;
    padding-right: 5px;
    font-size: 15px;
}

      sheldon

      An even better solution, because you make the icon part of the link whereas in my solution it was not.

        sheldon Yeah, it looks really, really better than @Pollux one, but I thank you both for your help. ?

          25 days later

          Would it be possible to move the search input field on the mobile view to the top?

          Meaning:
          1. Search Area
          2. Custom Links
          3. System Links

          I think this would be visually more attractive. Any thoughts about it?

          23 days later

          warpunish Can i get any help ?

          Sure, so what is your question?

          Keep in mind: Some more information what you already did, what the outcome was and what you want to achieve will always be immensely helpful.

              Pollux I tried adding

              .item-link1::before {
              font-weight:bolder;
              color: White;
              padding-right: 5px;
              font-size: 15px;
              }

              to custom CSS under Apperances page but it doesn't change a thing. What i want is, more distinct links in my navbar. Right now my link looks weak and they dont draw attention.

                  warpunish

                  Where did you tell the browser to use FontAwesome? Where is the content, that you want to add?

                  I suggested:

                  .item-link1::before {
    font-family: FontAwesome;
    content: ...
    font-size: ...
}

                  but you skipped the two most important attributes.

                  Anyway, I suggest to use @sledov's way of doing this:

                  .item-link1 .LinksButton.Button.Button--link::before {
    content: "\f005";
    font-family: fontawesome;
    padding-right: ...
    font-size: ...
}

                  This way, you apply the icon to the <a> element (this has the classes LinksButton, Button and Button--link) , so the icon becomes part of the link.

                      FebriTriHarmoko don't forget to always clear cache after you change setting your flarum.

                      No, usually you don't need to do that after changing custom CSS in the admin panel. Just refresh the browser content.

                        Pollux I tried @sheldon 's way this time but i thing i am getting something wrong. It just changes icons property not the text's. Do i have to add something else ?

                            warpunish It just changes icons property not the text's.

                            That's what it is supposed to do. Ralkage

                            Why do you want to change the text by means of CSS? You can change it easily in the links-extension.

                                  Sure.

                                  .item-link1 {
    font-weight: bold;
}

                                    Pollux Thank you. One last question is it possible to change color of the text i tried

                                    .item-link1 {
                                    font-weight: bold;
                                    color: Red;
                                    }

                                    but it didn't work.

                                      The <a> element inside the <li> element with class item-link1 has its own color, so you have to override that:

                                      .item-link1 {
    font-weight: bold;
}
.item-link1 a {
    color: red;
}

                                      or shorter:

                                      .item-link1 a {
    font-weight: bold;
    color: red;
}
                                      6 days later

                                      ewenharrison same for me too. It happens on Safari for Mac also.

                                      @sijad would you mind looking into this? On desktop, links are ordered left to right (Link 1, Link 2, Link 3). On some mobile browsers, like iOS Safari and Safari for Mac in mobile resolution, the links are ordered from bottom to top.

                                      i.e.
                                      Link 3
                                      Link 2
                                      Link 1

                                          mudjunky yes I can reproduce this, I'm not sure how did I miss this bug, would you mind open an issue in github?

                                              It's a normal that activation takes 2/3 minutes and a red error that prevents re-opening the admin area?

                                              however, it is turned on and works! ?