Changing image to Font Awesome icon

[spiros]

I am trying to change some images to Font Awesome icons.

For example, last_post.gif, the icon in message index that goes to the last post.

In MessageIndex.template.php I can see:

Code Select Expand

<a href="', $topic['last_post']['href'], '"><img src="', $settings['images_url'], '/icons/last_post.gif" alt="', $txt['last_post'], '" title="', $txt['last_post'], '" /></a>


I tried replacing it on Chrome Tools as a test, but it changed position and this code had issues

Code Select Expand

<a href="', $topic['last_post']['href'], '"><i class="fas fa-angle-double-right">title="', $txt['last_post'], '"</i></a>

https://www.translatum.gr/forum/index.php?board=6.0

[Antechinus]

Well yes, it would have issues. You've tried to put the title attribute between the opening and closing tags of the i, which you can't do. It has to go inside the opening tag of either the anchor or the i. And the default CSS puts a float on the original image, IIRC.

For markup, this would be more like it:

Code Select Expand

<a href="', $topic['last_post']['href'], '" title="', $txt['last_post'], '"><i class="fas fa-angle-double-right"></i></a>

[spiros]

Yes, you are right:

Code Select Expand

.lastpost img {
    float: right;
    padding: 4px;
}

I think just adding

Code Select Expand

i.fas.fa-angle-double-right {
    padding: 4px;
    float: right;
}

Should do the trick

[Antes]

just replace .lastpost img to .lastpost i -should do the trick.

[spiros]

Yes, it did! Thank you!