XF 2.3 Converting FA Icon Code for Widget Template area.

mkucuksari

Well-known member
In XF 2.2 I have custom widget. For this custom widget, instead of using extra.less template I was using following code for Widget Icon at
Template widget area.

HTML:
<style type="text/css">
.block[data-widget-id="62"] .block-minorHeader:before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f2b5";}  
</style>

After upgrade XF 2.3, this code normally does not work any more. According what I read from forum up to now, I have revised this code as below,
but it did not work :(
HTML:
<style type="text/css">
.block[data-widget-id="62"] .block-minorHeader:before {
   .m-faContent(@fa-var-handshake) !important;}
</style>

But when I put this revised code at "Extra.less", it does work

CSS:
.block[data-widget-id="62"] .block-minorHeader:before {
   .m-faContent(@fa-var-handshake) !important;}

But still I want to use this code at widget template area. So could anyone give a suggestion to solve my problem. ?
 

Attachments

  • Screenshot_5.webp
    Screenshot_5.webp
    42.8 KB · Views: 1
Last edited:
You should try <style type="text/less"> instead <style type="text/css"> as now you are using Less syntax.
Thanks for suggestion but it did not work. :(

CSS:
<style type="text/less">
.block[data-widget-id="62"] .block-minorHeader:before {
   .m-faContent(@fa-var-handshake) !important;}
</style>
 
You are using this code in a HTML widget correct?
I don't know why you want to add this code directly to the html template because using extra.less template is very easy but maybe you can use an alternative by creating a new less template and calling it in your widget html template <xf:css src="mycss_file.less">
 
Last edited:
You are using this code in a HTML widget correct?
I don't know why you want to add this code directly to the html template because using extra.less template is very easy but maybe you can use an alternative by creating a new less template and calling it in your widget html template <xf:css src="mycss_file.less">
Yes I am using this code in a HTML Widget. Thanks for suggestion.

If I can not find a solution to this problem, then I may use your last suggestion. :)

Many thanks for your interest. (y)
 
Back
Top Bottom