XF 2.1 Quick question - styling a Notice

[beerForo]

When I am in the acp and there's an "attention" message, this is how I want to style one of my front end notices. With the yellow banner and explanation point icon.

Would anyone be able to help style this for the boxes:

Display styling
Other, using custom CSS class name: (the same yellow)

and

Display image
Specify an image: (the same exclamation point)

Thanks!

(I want to replicate the red banner with X as well but I think I can figure that out after this help.)

 

[BassMan]

extra.less template:

.cxf-notice {
    color: #aa6709;
    background: #fff4e5;
    border-left: 3px solid #f2930d;
    text-align: left;
    position: relative;
    padding-left: 3em;
    min-height: 4em;

    &:before {
        .m-faBase();
        .m-faContent(@fa-var-exclamation-circle);
        color: #f2930d;
        font-size: 280%;
        position: absolute;
        top: 0;
        left: 6px;
    }
}

Result:

 

[AzzidReign]

.m-faContent(@fa-var-exclamation-circle);

How can I use this:

Exclamation Triangle Icon | Font Awesome

Exclamation Triangle icon in the Version 5 Solid style. Make a bold statement in small sizes.. Available now in Font Awesome Pro.

fontawesome.com

I've tried a few different things and never can get it to work.

 

[BassMan]

How can I use this:

Exclamation Triangle Icon | Font Awesome

Exclamation Triangle icon in the Version 5 Solid style. Make a bold statement in small sizes.. Available now in Font Awesome Pro.

fontawesome.com

I've tried a few different things and never can get it to work.

To use the "sollid" icon, use this .m-faBase('Pro', @faWeight-solid); instad of this .m-faBase(); in the code above.

 

[AzzidReign]

To use the "sollid" icon, use this .m-faBase('Pro', @faWeight-solid); instad of this .m-faBase(); in the code above.

Thank you <3

 

[AzzidReign]

To use the "sollid" icon, use this .m-faBase('Pro', @faWeight-solid); instad of this .m-faBase(); in the code above.

Sorry, hopefully this is my last question. How can I use the fa-3x variable?

 

[BassMan]

Sorry, hopefully this is my last question. How can I use the fa-3x variable?

You can't use this variable in CSS. Just increase the font size.