LMS social Share icon Twitter have to change to X
LMS social Share Twitter have to change to X
5 replies
Hola Alvaro,
A small problem becuase Font Awesome 5 does not have a NEW Twitter icon, only old one.
I know that you are not afraid challenges, so please download Font Awesome 6 Free package, Unzip it. And replace/override those files:
- templates\edulif\css\font-awesome.min.css
- and all files here: templates\edulif\fonts
Then use that Custom CSS
.splms-icon-twitter::before {
content: "\e61b";
font-family: "Font Awesome 6 Free";
font-weight: 600; }
It should help :) in theory.
Yes, there is alternative method in case of...
in which file I have to make custom code?
I saw inside LMS
font-splms.css with this code
font-family: 'splms';
src:
url('../fonts/splms.ttf?9e6gz9') format('truetype'),
url('../fonts/splms.woff?9e6gz9') format('woff'),
url('../fonts/splms.svg?9e6gz9#splms') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
then I have to edit template.css in edulif?
- Helix Ultimate >> https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta
- Helix3 >> https://www.joomshaper.com/documentation/helix-framework/helix3/custom-css-header-code#how-to-use-custom-css
In general, in Custom CSS area. You don't need to edit any file.
font-splms.css is the file where is the icon inside LMS component
has his own code for font family
font-family: 'splms';
src:
url('../fonts/splms.ttf?9e6gz9') format('truetype'),
url('../fonts/splms.woff?9e6gz9') format('woff'),
url('../fonts/splms.svg?9e6gz9#splms') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
and code for twitter icon
}
.splms-icon-twitter:before {
content: "\e65d";
}
line 327 to 330
but can not upgrade this file to awesome font 6 free
Do not edit component files! It does not make sense.
As I said before you can also use alternative method
-
download image file (Save Image as) >>

-
Upload to /images folder
-
Then use that Custom CSS:
.splms-icon-twitter::before {content: url("/images/x.png"); display: inline-block;height: 16px;}