Castronaru forumlist_body.hml [...] What should I do?
Don't touch forumlist_body.hml or any other of the core files.
Right now there is no easy way to change the icons, but that doesn't mean, that you can't do it. I will show you with an example, how you can do it.
Let's assume, you want to change the little bell symbol in the right upper corner beneath your user name, which indicates your notifications. First you have to analyse the dom node of this symbol using Inspect Element after right clicking the symbol with your Firefox or Chrome browser. You will find:
<button class="Dropdown-toggle Button Button--flat" data-toggle="dropdown" title="Notifications">
<i class="icon fa fa-bell Button-icon"></i>
<span class="Button-label">Notifications</span>
</button>
The interesting part is the <i class="icon fa fa-bell Button-icon"></i>. It's an empty <i> that seems to do nothing, but there is a CSS rule to it, which you can analyse, if you click on this element in the Inspector. (You probably have to click on the little arrow in front of the <button> element to see it.)
There is one particular rule which is important for you, because it determines the icon:
.fa-bell::before {
content: "\f0f3";
}
It says: Whenever there is an element with the fa-bell class, put the \f0f3 character in front of it. That's the icon you want to change. The <i> element we are talking about also has other classes like icon and fa, where the latter one tells the browser to use the FontAwesome font, which turns these funny characters like \f0f3 into icons.
Next step: Go to the cheatsheet of the FontAwesome website. If you search for the bell, you can find this entry:
fa-bell []
fa-bell is the name of the icon we have seen in our CSS rule above.  is the html equivalent of the funny character, that was used in this rule. You have to remove the &#x and the trailing ; to get the f0f3 that we need.
Now lets look for an alternative icon, let's assume you like the next bell, the outlined version instead of the solid one. It is shown as:
fa-bell-o []
Now comes our surgery: We want to tell flarum, that whenever it's supposed to show fa-bell, we want it to show the fa-bell-o version instead. So we create our own CSS rule:
.fa-bell::before {
content: "\f0a2";
}
With this rule, the class fa-bell is associated with the \f0a2 character instead of \f0f3. Dont forget the quotes and the backslash, they are important.
Now, all is left is telling flarum to actually use this rule. To do that, we go to the admin panel and open the section Appearance. Here we find a button Edit Custom CSS. Click on it and paste the above mentioned CSS rule and Save Changes. Reload the page et voilà, there you have your shiny new outlined bell.
But keep in mind, that this replaces all solid bells with their outlined cousins, wherever they might appear in your forum.
