diff --git a/addons/web/static/fonts/tiktok_only.woff b/addons/web/static/fonts/tiktok_only.woff new file mode 100644 index 00000000000..c589fe0ae65 Binary files /dev/null and b/addons/web/static/fonts/tiktok_only.woff differ diff --git a/addons/web/static/src/legacy/scss/fontawesome_overridden.scss b/addons/web/static/src/legacy/scss/fontawesome_overridden.scss index a234dbc9f81..985095de693 100644 --- a/addons/web/static/src/legacy/scss/fontawesome_overridden.scss +++ b/addons/web/static/src/legacy/scss/fontawesome_overridden.scss @@ -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 { diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss index 93811fb0cee..e2b8d593917 100644 --- a/addons/website/static/src/scss/primary_variables.scss +++ b/addons/website/static/src/scss/primary_variables.scss @@ -40,6 +40,7 @@ $o-social-colors: ( 'instagram': #cf2872, 'whatsapp': #25d366, 'pinterest': #C8232C, + 'tiktok': #000000, ); $o-theme-figcaption-opacity: 0.6; diff --git a/addons/website/static/src/snippets/s_social_media/000.scss b/addons/website/static/src/snippets/s_social_media/000.scss index 1bba940de5a..b5b1d34e3b0 100644 --- a/addons/website/static/src/snippets/s_social_media/000.scss +++ b/addons/website/static/src/snippets/s_social_media/000.scss @@ -61,5 +61,10 @@ @extend .text-youtube; } } + .s_social_media_tiktok { + &, &:hover, &:focus { + @extend .text-tiktok; + } + } } }