Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
JMM
Experienced
Topic Author
Posts: 158
Joined: 02 Aug 2021, 11:18

Can I somehow use a Font Awesome v5 icon (or a specific unicode symbol) in X3?

01 Jun 2023, 00:47

Hello, Karl,

I understand that the purpose of EXIF information is to record & display information about camera & settings ralating to pictures.  This works great in X3, and I am happy that X3 is able to display that information.

Some of the pictures on my X3 sites have been scanned from paper photos, and I have managed to manually enter in scanner make & scanner model (for camera make & model), as you can see here:
Image

I understand that X3 uses Font Awesome version 4.7, but I want to somehow be able to use something similar to THIS Font Awesome icon, which is v5.

I have absolutely no idea whatsoever as to how Font Awesome works, so my questions are:
  1. Is it possible for me to maybe be able to download & add that specific Font Awesome v5 icon to my X3 site, and have X3 be able to display it?
  2. If so, for specific X3 gallery folders, am I able to add Custom CSS code that would replace the Camera icon on the Exif line to that Font Awesom v5 scanner icon?
I know that I can use (some) unicode symbols in X3 labels, as for a test-only I have added that green checkmark to one of my labels in the above screenshot, with:
Code
<span class="label" style="background-color:#848884;color:white">&#9989  31st May 2023</span>
However, at the top of that page with the Font Awesome icon that I want to use, it shows that the Unicode code for that icon is f8f3, but when I try to use $#f8f3, all it shows is an empty square box instead of the icon.

In that above screenshot, I would like to be able to use that scanner icon on the label that shows the date of 31st May 2023.  If I can somehow do that, I would add another label to that line, with that same scanner icon, with the text Epson WF-7840 MFP Scanner, and haveX3 not display the Exif line at all, because in this case the Exif information is redundant as it already displayed in labels.

I welcome your thoughts on if & how I am able to accomplish the above.

Thank you in advance & have yourself a great day.

Regards,
John
Location: Burlington (Toronto-ish), Ontario, Canada
Self-hosted using Abyss Web Server:   AuroraWings.me   |   FusionWings.com   |   PanAurora-Studio.com   |
Externally-hosted using LiteSpeed/Apache Web Server:   GenealogyWings.com   |
 
User avatar
JMM
Experienced
Topic Author
Posts: 158
Joined: 02 Aug 2021, 11:18

Re: Can I somehow use a Font Awesome v5 icon (or a specific unicode symbol) in X3?

01 Jun 2023, 02:13

I've managed a work-around:
Image

I downloaded that icon, made the background transparent, and then used the following code to add the image to the labels:
Code
<span class="label" style="background-color:#848884;color:white"><img src='/common/~icons/icon-scanner.png' border='0' width='15'>  31st May 2023</span>

<span class="label" style="background-color:#848884;color:white"><img src='/common/~icons/icon-scanner.png' border='0' width='15' valign='bottom'>  Epson WF-7840 MFP Scanner</span>
I now just need to figure out how to shift the image up slightly-higher within the labels... using top, middle, or bottom for valign doesn't seem to work.

Thanks anyway, and thank you again for a great product.

Regards,
John
Location: Burlington (Toronto-ish), Ontario, Canada
Self-hosted using Abyss Web Server:   AuroraWings.me   |   FusionWings.com   |   PanAurora-Studio.com   |
Externally-hosted using LiteSpeed/Apache Web Server:   GenealogyWings.com   |
 
User avatar
mjau-mjau
X3 Wizard
Posts: 14012
Joined: 30 Sep 2006, 03:37

Re: Can I somehow use a Font Awesome v5 icon (or a specific unicode symbol) in X3?

01 Jun 2023, 02:43

Try this:
Code
<span class="label" style="background-color:#848884;color:white;display:flex;align-items:center"><img src='/common/~icons/icon-scanner.png' border='0' width='15' valign='bottom'>  Epson WF-7840 MFP Scanner</span>
 
User avatar
JMM
Experienced
Topic Author
Posts: 158
Joined: 02 Aug 2021, 11:18

Re: Can I somehow use a Font Awesome v5 icon (or a specific unicode symbol) in X3?

01 Jun 2023, 03:09

It looks like that worked for centering the image & text vertically, thank you, but something's making that label extend all the way to the right side of the line...
Image
Location: Burlington (Toronto-ish), Ontario, Canada
Self-hosted using Abyss Web Server:   AuroraWings.me   |   FusionWings.com   |   PanAurora-Studio.com   |
Externally-hosted using LiteSpeed/Apache Web Server:   GenealogyWings.com   |
 
User avatar
mjau-mjau
X3 Wizard
Posts: 14012
Joined: 30 Sep 2006, 03:37

Re: Can I somehow use a Font Awesome v5 icon (or a specific unicode symbol) in X3?

01 Jun 2023, 04:29

Sorry, try inline-flex instead:
Code
<span class="label" style="background-color:#848884;color:white;display:inline-flex;align-items:center"><img src='/common/~icons/icon-scanner.png' border='0' width='15' valign='bottom'>  Epson WF-7840 MFP Scanner</span>
If I had a link to test on, I could test directly in browser before responding ...
 
User avatar
JMM
Experienced
Topic Author
Posts: 158
Joined: 02 Aug 2021, 11:18

Re: Can I somehow use a Font Awesome v5 icon (or a specific unicode symbol) in X3?

01 Jun 2023, 04:55

Sorry, I had that gallery temporarily hidden, to keep my relatives out of it while I was sorting things out  :relaxed:.

HERE is a link to that gallery.  Only the 1st image has that label-centering thing applied.  The inline-flex worked to make the label the correct width, thank you.

I do notice that the label with that align-items:center is slightly higher than the other labels on that line, so I figured that I would just add that extra code to ALL the labels in that gallery, as I have done for the 2nd image.  However, with that code added to all the labels for the 2nd image, only the 2 labels with the scanner image in the label got raised, not all the other labels on that line.

If it's not possible to align them all vertically, that's OK as I can live with that.
Location: Burlington (Toronto-ish), Ontario, Canada
Self-hosted using Abyss Web Server:   AuroraWings.me   |   FusionWings.com   |   PanAurora-Studio.com   |
Externally-hosted using LiteSpeed/Apache Web Server:   GenealogyWings.com   |
 
User avatar
JMM
Experienced
Topic Author
Posts: 158
Joined: 02 Aug 2021, 11:18

Re: Can I somehow use a Font Awesome v5 icon (or a specific unicode symbol) in X3?

01 Jun 2023, 05:01

Sorry, I meant to say that I had that gallery temporarily protected (requiring a username & password), not hidden.  But I unprotected it a short while before you inquired about a link, so all is good in that respect.
Location: Burlington (Toronto-ish), Ontario, Canada
Self-hosted using Abyss Web Server:   AuroraWings.me   |   FusionWings.com   |   PanAurora-Studio.com   |
Externally-hosted using LiteSpeed/Apache Web Server:   GenealogyWings.com   |
 
User avatar
mjau-mjau
X3 Wizard
Posts: 14012
Joined: 30 Sep 2006, 03:37

Re: Can I somehow use a Font Awesome v5 icon (or a specific unicode symbol) in X3?

01 Jun 2023, 10:34

This is almost mission impossible, because you are using a mix of font-icons, images and unicode, all with different heights and layout properties. The FLEX align-items simply makes sure that the items inside each span (icon + text) aligns vertically center. It can't take into consideration what is affecting each span (different items inside), so that each span does not align with eachother.

The "real" solution to this, would be to use consistent icon types, so that the <span> tags would be consistent. Alternative solutions, could be to assign FLEX to the parent, but this causes all kinds of other issues you would not want to deal with. In reality, the best solution is to ignore the tiny misalignment.
 
User avatar
JMM
Experienced
Topic Author
Posts: 158
Joined: 02 Aug 2021, 11:18

Re: Can I somehow use a Font Awesome v5 icon (or a specific unicode symbol) in X3?

02 Jun 2023, 05:30

Sorry for the delay in replying here.
It can't take into consideration what is affecting each span (different items inside), so that each span does not align with eachother.

The "real" solution to this, would be to use consistent icon types, so that the <span> tags would be consistent.
Well, as a test I intially removed all usage of Font Awesome icons, and instead went with images instead.  I didn't get around to testing to see what happens with different screen resolutions, as there were inconsistencies in the label heights... as an example, all would be aligned both top & bottom except for 1 label due to the height of that label's image, but when I enlarged or reduced that label's image so it would align with the other labels, it would now be aligned, but another label that was previously aligned with the other labels was now no longer aligned :thinking:.

All of these hassles, just coz I wanted that scanner icon  :sunglasses:, but in the end I eventually returned to using 100% Font Awesome icons (which are so much nicer, and painless), and just found another icon to use in place of that scanner icon, so all is good now & I'm happy.

Thanks for your help, Karl, and have a great weekend.
Location: Burlington (Toronto-ish), Ontario, Canada
Self-hosted using Abyss Web Server:   AuroraWings.me   |   FusionWings.com   |   PanAurora-Studio.com   |
Externally-hosted using LiteSpeed/Apache Web Server:   GenealogyWings.com   |