[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:
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user