It doesn't work the way you expect because you're using
tmpl URL parameter with value
messages. What this parameter does is tells is to render the page using the specified template layout. When the given layout doesn't exist, the default (
index) layout from
system template is used. It has minimal styling and does not load the icon stylesheets. Changing the
tmpl parameter value to
component alone would work with the default Cassiopeia template. But if you expect certain CSS classes to work, you should also load the stylesheets in your view layout so it actually works with all templates. To enable fontawesome, you can use this:
Another thing to consider is that using classes and allowing HTML in general is probably not the best idea for a live chat. Would be better to use some sort of shortcodes or alternative syntax like Markdown. Or, if you do use HTML, you should at least filter out dangerous tags and attributes. Because currently your component is wide open to XSS attacks.