fraxzi Posted April 20, 2021 Share Posted April 20, 2021 Hi All, I searched all over but I could find a solution. Since I don't know how to do it, I am asking if anyone knows. How can I change icon in customCSS with fontasesome icon: I tried but not working: .x-grid-row-expander{ content: "\f150"; } Thanks, Frances Quote Link to comment Share on other sites More sharing options...
Hayri ASLAN Posted April 20, 2021 Share Posted April 20, 2021 14 hours ago, fraxzi said: Hi All, I searched all over but I could find a solution. Since I don't know how to do it, I am asking if anyone knows. How can I change icon in customCSS with fontasesome icon: I tried but not working: .x-grid-row-expander{ content: "\f150"; } Thanks, Frances Hi If you want to use FontAwesome, you should use pseudo css like below .x-grid-row-collapsed .x-grid-row-expander::before{ content: "\f2b6"; font-family: 'FontAwesome'; font-size: 16px; background: white; } .x-grid-row-expander::before{ content: "\f294"; font-family: 'FontAwesome'; font-size: 16px; background: white; } Quote Link to comment Share on other sites More sharing options...
fraxzi Posted April 21, 2021 Author Share Posted April 21, 2021 1 hour ago, Hayri ASLAN said: Hi If you want to use FontAwesome, you should use pseudo css like below .x-grid-row-collapsed .x-grid-row-expander::before{ content: "\f2b6"; font-family: 'FontAwesome'; font-size: 16px; background: white; } .x-grid-row-expander::before{ content: "\f294"; font-family: 'FontAwesome'; font-size: 16px; background: white; } Hi Hayri, I tried but with this result: I there anything I need to tweak aside from CustomCSS of ServerModule? Thanks for helping, Frances Quote Link to comment Share on other sites More sharing options...
fraxzi Posted April 21, 2021 Author Share Posted April 21, 2021 BTW, I use "uni_ubuntu_triton" theme. Thanks, Frances Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 21, 2021 Share Posted April 21, 2021 6 hours ago, fraxzi said: Hello, Also add this CSS rule: .x-grid-row-collapsed .x-grid-row-expander, .x-grid-row-expander { background-image: none; } Quote Link to comment Share on other sites More sharing options...
fraxzi Posted April 21, 2021 Author Share Posted April 21, 2021 26 minutes ago, Sherzod said: Hello, Also add this CSS rule: .x-grid-row-collapsed .x-grid-row-expander, .x-grid-row-expander { background-image: none; } Hi @Sherzod, It works! There's white box if expanded and when collapse.. not a problem though. I just need to center vertically the Icon. Thanks much, Frances Quote Link to comment Share on other sites More sharing options...
fraxzi Posted April 21, 2021 Author Share Posted April 21, 2021 I found it! "display: inline;" Thanks @Sherzod and @Hayri ASLAN for the Help. Regards, Frances Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.