FontAwesome BBCode

  • Hello,

    I'd create this in the support board but it seems I don't have access to create threads there, perhaps because I'm using the Core product rather than the Suite product.

    I've created a FontAwesome icon bbcode for my forum that looks like this:

    BBCode: fa
    Opening HTML tag: i
    Closing HTML tag: i
    Display Button in WYSIWYG Editor: yes
    Button Label: Insert FontAwesome Icon
    Button Image: fa-solid fa-font-awesome
    Attribute 0 HTML Code: class="%s"
    Attribute 0 Regular Expression: ^(fa(-[0-9a-zA-Z]+)+)( (fa(-[0-9a-zA-Z]+)+)+)*$
    Required: yes
    Use content: yes

    In CKEditor, the button appears but it has a missing image icon rather than a font-awesome icon. Clicking the button or inserting the bbcode manually seems to work, and it correctly inserts the expected HTML is generated on the front end but the icon is also missing here.

    Does Woltlab Suite Core not support FontAwesome icons or am I experiencing a configuration issue?

  • Thanks Alexander, that was the link I needed.

    For anyone looking to do this themselves, this is my setup for my bbcode:

    • BBCode: fa
    • Opening HTML tag: fa-icon
    • Closing HTML tag: fa-icon
    • Display button in WYSIWYG Editor: yes
      • Button Label: Insert FontAwesome Icon
      • Button Image: flag;false (this shows in black, not sure how to change this)
    • Attribute 0
      • Attribute HTML Code: name="%s"
      • Required: yes
      • Use content: yes

    I would like to get a title attribute working but I'd need to play with this a bit a bit more.

    Edited once, last by Devin at TAFS (March 29, 2024 at 5:34 PM).

  • font-awesome;false would be the proper value. The false indicates that you request a non-solid variant if it is available.

    Unfortunately this doesn't render anything. This is the generated HTML:

    Code
    <fa-icon name="font-awesome" size="16"></fa-icon>

    Space is reserved for an icon, but there isn't anything that is actually drawn.

    Edit: it may just be this specific icon. I changed it to one I know works, in this case fa-download using download;false and it displays just as expected. Perhaps this system just doesn't like brand icons?

    Using the search button, I found the icon flag. It appears this is the same icon as the font-awesome brand icon.

    Edited 2 times, last by Devin at TAFS (March 29, 2024 at 5:34 PM).

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!