[IMP] web, website: add TikTok icon

This commit patches the font awesome library to add an icon for the
TikTok social network. Users are now able to add these icons with the
media dialog. Now, the TikTok icon works like all other font awesome
icons, with the new class introduced by this commit: `fa-tiktok`.
Moreover, the social media block in the website application can detect a
tiktok link and automatically integrate its icon with its color.

Technical note:
In order to add this new icon, a new font that contains only the TikTok
logo has been created.

task-3235451

closes odoo/odoo#118542

X-original-commit: dc926d56a286eebd3e7c10343824a6e2c1a76adc
Signed-off-by: Vray Benjamin (bvr) <bvr@odoo.com>
This commit is contained in:
Guillaume (gdi)
2023-04-14 12:54:02 +02:00
parent ea881196d2
commit 7c474c1a79
4 changed files with 22 additions and 0 deletions
Binary file not shown.
@@ -1,3 +1,19 @@
// This is a patch of the font awesome library to add the TikTok icon.
@font-face {
font-family: 'FontAwesome-tiktok-only';
src: url('../../../fonts/tiktok_only.woff');
font-weight: normal;
font-style: normal;
font-display: block;
}
.fa.fa-tiktok {
font-family: 'FontAwesome-tiktok-only' !important;
&:before {
content: '\e07b';
}
}
// This is rtl language specific fix
// It will override the font awesome symbols and flip them 180 degree
.o_rtl {
@@ -40,6 +40,7 @@ $o-social-colors: (
'instagram': #cf2872,
'whatsapp': #25d366,
'pinterest': #C8232C,
'tiktok': #000000,
);
$o-theme-figcaption-opacity: 0.6;
@@ -61,5 +61,10 @@
@extend .text-youtube;
}
}
.s_social_media_tiktok {
&, &:hover, &:focus {
@extend .text-tiktok;
}
}
}
}