Page 1 of 1

footer icons

Posted: 17 Dec 2017, 23:00
by SilentD
is it possible to add custom footer icons somehow?

Re: footer icons

Posted: 18 Dec 2017, 00:40
by mjau-mjau
You can add any link with any color and any title, and any icon that you can find available in Font Awesome:
http://fontawesome.io/icons/
Code
<a href="https://flamepix.com" data-icon="fire" data-color="brown" title="X3 hosting!"></a>
More complicated if you want to add your OWN icon. You would have to create an icon (png), upload into a dir, and add custom CSS to make sure the new button looks almost identical with the other buttons (since you are using an image and not a font). If you really need a different graphic/icon/logo than available in Font Awesome, it might be an idea to add the link BELOW the icon buttons instead of struggling to try to make it look identical.

Re: footer icons

Posted: 18 Dec 2017, 20:06
by SilentD
design is my thing, so thats the easy part.. adding the code is the hard part for me..

how would the code or link look like, in order to attach an image as an icon?.. say I put a "youpic.png" in the images folder.  How does it appear in the footer?

Re: footer icons

Posted: 19 Dec 2017, 00:01
by mjau-mjau
SilentD wrote:how would the code or link look like, in order to attach an image as an icon?.. say I put a "youpic.png" in the images folder.  How does it appear in the footer?
I can give you the html code (see below), but the icon will not look the same as the other icons. The dimensions and aspect of your IMG would create a different padding for the circle, and the circle would be bigger and not even symmetric [screenshot]. You would have to add several custom CSS styles to make it look the same.
Code
<a href="https://flamepix.com" data-icon="" title="X3 hosting!">
  <img src="/content/custom/files/images/filename.png" alt="">
</a>
Unfortunately, it's not as easy as it may seem to create symmetric rounded circles if the icons inside have different size/aspect or are different in nature. This should work: Go to settings > custom > custom CSS:
Code
.my-custom-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
Then add the above class to your img icon:
Code
<a href="https://flamepix.com" data-icon="" title="X3 hosting!">
  <img src="/content/custom/files/images/filename.png" class="my-custom-icon" alt="">
</a>
Maybe we can improve X3 so it's easier to add custom icons in a future release.

Re: footer icons

Posted: 19 Dec 2017, 09:11
by SilentD
ok. thanks.. that worked just fine.