@sijad Stunning extension, good job.

I think you should mention that browser cache should be cleared and this should be ran in the flarum root dir.

php flarum cache:clear
11 days later
5 days later

KlebersonRomero It is possible to add FA icons before the text using Custom CSS/LESS due to each item-link generating a unique class after being created through the extension's UI.

Example:

item-link1
item-link2
item-link3
item-link4
etc.

      Ralkage Could you explain more, maybe provide something like step by step tutorial? I really don't get it. ;| Especially what to put into extension fields... You don't need to be so accurate, just write main things, so we could google the rest. ?

          Veriael Especially what to put into extension fields...

          Once you have the link extension installed, you will find a section links in the administration. Her you can manage your links (add, edit, delete). Adding a link just needs a title and URL. Furthermore you can mark, if it's an internal link and whether it should be opened in a new window.

          The generated dom node for your links looks like:

          <li class="item-link1">
    <a class="LinksButton Button Button--link" target="" href="..." title="...">...</a>
</li>

          The second link will have the class item-link2 and so on.

          You can easily apply CSS rules to that link e.g.

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

          Hope this helps.

              8 days later

              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.