Search…

X3 Photo Gallery Support Forums

Search…
 
Kamil.Lebiecki
Topic Author
Posts: 5
Joined: 22 Sep 2022, 04:30

TikTok icon in Custom Footer

27 Sep 2022, 09:11

Hey,

Since we use Font Awesome version 4.7.0, which doesn't have the most up-to-date icons, is there a way to put a TikTok icon in the Custom Footer?

Thanks!
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: TikTok icon in Custom Footer

27 Sep 2022, 10:52

I don't actually quite know what happened to font awesome ... On their website, they want you to "buy" or "sign up", there is no documentation about any simple CSS icon-fonts approach (like the version X3 is using), and they seem to have various implementation methods including Javascript. Besides this, I find font-awesome bloated, and in a major future X3/X4 release, I would be using real SVG material design icons (design by Google), like we do in files.gallery.

I did search a bit, and found this:
https://cdn.jsdelivr.net/npm/@fortaweso ... ds.min.css

There doesn't seem to be an instructions anywhere, but it can be loaded into your X3 website, and you could assign tiktok icon, although you would have to make a few other CSS adjustments, because these icons don't match the V4 icons.

Optionally, you could get the SVG from the link (click "copy svg code" button), add it into the button, and then you would need some custom CSS to make it look like the other icon buttons in the X3 footer.
https://fontawesome.com/icons/tiktok?s=solid&f=brands
 
AlexKalopsia
Posts: 13
Joined: 20 Apr 2022, 06:05

Re: TikTok icon in Custom Footer

07 Nov 2022, 07:00

Any more guidance on this?

I have updated `font-awesome-min.css` to the content linked above (which I can see includes the Mastodon icon) where the mastodon icon is fa-mastodon:before{content:"\f4f6"}

In `x3.min.js` I have added {id:"Mastodon",icon:"mastodon"}

In `font-awesome-webfont.svg` I have added (I guessed horiz-adv-x)


<glyph glyph-name="mastodon" unicode="&#xf4f6;" horiz-adv-x="1024"
d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74
3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064
3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328
1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z" />


The icon still doesn't show
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: TikTok icon in Custom Footer

07 Nov 2022, 08:18

I'm actually not sure how you are trying to achieve this. Font awesome is technically a "font" and uses fontawesome-webfont.woff2 (font file) to render the fonts. I think it would only use font-awesome-webfont.svg for older browser versions. Do you have a link so I can take a look?

Probably the simplest way to achieve this (since TikTok is not included), would be to add the static <svg> code, into the <a> button, and then add some custom CSS to adjust the icon so that it looks like the other link icons ...
In `x3.min.js` I have added {id:"Mastodon",icon:"mastodon"}
I would avoid this. Besides, the code you have edited, seems to be the DEFAULT toolbar config (not related to buttons in the footer). The toolbar items can be edited from Settings > Toolbar, without having to edit x3.min.js.
 
AlexKalopsia
Posts: 13
Joined: 20 Apr 2022, 06:05

Re: TikTok icon in Custom Footer

07 Nov 2022, 08:32

Thanks for the reply. And yes, I did eventually end up just using svg and css trickery. I couldn't in the name of god make the svg fit properly centered in a circular button, so I ended up with this mess

<div class="icon-buttons hover-color hover-title">
  <a style="min-height: 96px;" href="https://twitter.com/myaccount"></a>
  <a style="min-height: 96px;" href="https://www.instagram.com/myaccount/" data-icon="instagram"></a>
  <a style="min-height: 70px; max-width: 55px;" rel="me" href="myurl" data-icon="mastodon">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-mastodon" style="margin-left:-12px;" viewBox="0 0 16 16">
    <g transform="translate(0,0)"></g>
  <path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"/>
</svg></a>

Image
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: TikTok icon in Custom Footer

07 Nov 2022, 09:50

I don't blame you for the messy solution, as the original solution was specific to fonts ... I would have done it differently if it was done today. I probably have a better solution for you though, with minimal "hack":


Code
<a href="#" style="line-height:0;margin:0;padding:22px" data-icon="nada">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16" fill="currentColor">
    <path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"/>
  </svg>
</a>
 
AlexKalopsia
Posts: 13
Joined: 20 Apr 2022, 06:05

Re: TikTok icon in Custom Footer

09 Nov 2022, 03:22

Awesome, thanks for spending the time on this!