wikitree
Icons used at WikiTree
Is there some overview of icons that can be used by developers? Or is it possible to make dump of icons from main wikitree.com server into some archive? Those icons are already public (downloaded to browser when page that contains them is loaded), but it's not easy to find them.
I know that current way of using these icons is by using <img> referencing to images at wikitree.com. This way is very labour intensive in case somebody decides to change those icons. More over those icons are tiny bitmaps (probably there since the begining), where user must put some effort into pointing at them with mouse cursor (not to mention some fat finger). I can imagine even some users with poor sight that have issues with even finding them.
Better solution (in terms of upgrades and maintenance) is using CSS classes, where icons (either bitmap or svg) are defined in one place and are easily referenced via class - updated automatically thank to that in webpages.
Second part of the question - are there any restrictions in using icons from web? Let's say some licence restrictions. There are free or opensource iconsets and some generic icons would make sense to use (e. g. print, share, user, info, error, warning,...)
There's the rather large collection of icons provided by FontAwsome that can be used in opensource projects. I don't know if you'll find what you want, but there's a very wide range of stuff.
Yeah, I know about this collection and there is plenty of icons there (more than enough for me 😄). There are also other opensource iconsets.
That's for second part (rather into the future), but I'm more interested in first part.
While there is a page with some example/reference styles (colors, etc) at https://www.wikitree.com/css/examples.html, we don't have a standard set of icons. I agree some of the ones in use are excessively tiny. Setting up some icons that we can use with <i class="wt-icon wt-icon-something"> or something similar would be helpful. It would centralize the actual image definition of the icon (whether a PNG, SVG or whatever) into the CSS file so that any changes would happen across all of the views without having to search out individual img tags. Looking over the views so far, I'm not sure what sorts of starting icons/functions we need that are shared.
1st of all, is it posiible to share here (e.g. in archive) icons from /images/icons/ (e.g. https://www.wikitree.com/images/icons/search-submit-icon.png.pagespeed.ce.olcpRBRiHF.png)? It would be nice starting point to create some starting iconmap somewhere and define classes for it - those are icons that we have. - well yeah, tiny & possibly outdated, but still - it's a base and once it'll be defined in css, changing the actual bitmap is not so complicated.
There are also icons that we will need in the future - so we'll extend the iconmap.
Also there are now icons in many tiny gifs - it's not very efficient to download many smaller files - not because of the size, but because of establishing the connection.
I"m not sure what you mean by sharing here "in archive". I can certainly get a list of image URLs for icons at WikiTree. That could go "here" in our discussion or in a comment in tree.css or somewhere else. Of course the site is decades old and, maybe, has a bit of cruft, so I'm not sure it's useful to just grab a list of all of the files there. I'll see if it's not too hard to get a list of ones actually in use on various pages.
BTW, the URL you have above has been munged through the PageSpeed mod. The URL of the original image (which we'd want to use in any CSS icon definitions) is https://www.wikitree.com/images/icons/search-submit-icon.png.
Developing a set of useful icon CSS, along with scalable SVG icons and/or icon bundles for efficiency could be of great use for the rest of WikiTree too, and would be a great return on the effort put into these collaborative open-source pieces.
BTW, the URL you have above has been munged through the PageSpeed mod. The URL of the original image (which we'd want to use in any CSS icon definitions) is
https://www.wikitree.com/images/icons/search-submit-icon.png.
Aha! That's a little nugget I'd been looking for… I didn't think that the PageSpeed filenames could be the right ones to use. That's a great help.
…and I have a feeling Michal is talking about copying the icon files over to the apps server for the shorter urls?
I have most of the icons already documented. Let me see where I can stash the information.
I have most of the icons already documented. Let me see where I can stash the information.
Wow, cool!
I guess I can just stash the information here...
WikiTree Images / Icons
Gender Placeholder
| Icon | URL |
|---|---|
 |
https://www.wikitree.com/images/icons/female.gif |
 |
https://www.wikitree.com/images/icons/male.gif |
DNA
Make note of the /images/icons/dna/ subfolder used for test-specific icons.
| Icon | URL |
|---|---|
 |
https://www.wikitree.com/images/icons/dna.gif |
 |
https://www.wikitree.com/images/icons/dna/au.gif |
 |
https://www.wikitree.com/images/icons/dna/mt.gif |
 |
https://www.wikitree.com/images/icons/dna/X.gif |
 |
https://www.wikitree.com/images/icons/dna/Y.gif |
Navigation
| Icon | URL |
|---|---|
 |
https://www.wikitree.com/images/icons/add-nav.gif |
 |
https://www.wikitree.com/images/icons/arrow.gif |
 |
https://www.wikitree.com/css/images/arr_blue_2.gif |
 |
https://www.wikitree.com/images/icons/find-nav.gif |
 |
https://www.wikitree.com/images/icons/help-nav.gif |
 |
https://www.wikitree.com/images/icons/home-nav.gif |
 |
https://www.wikitree.com/images/icons/person-nav.gif |
Privacy
Open
| Icon | URL |
|---|---|
 |
https://www.wikitree.com/images/icons/privacy60.png |
 |
https://www.wikitree.com/images/icons/bullet60.gif |
Public
| Icon | URL |
|---|---|
 |
https://www.wikitree.com/images/icons/privacy50.png |
 |
https://www.wikitree.com/images/icons/bullet50.gif |
Private with Public Biography and Family Tree
| Icon | URL |
|---|---|
 |
https://www.wikitree.com/images/icons/privacy40.png |
 |
https://www.wikitree.com/images/icons/bullet40.gif |
Private with Public Family Tree
| Icon | URL |
|---|---|
 |
https://www.wikitree.com/images/icons/privacy35.png |
 |
https://www.wikitree.com/images/icons/bullet35.gif |
Private with Public Biography
| Icon | URL |
|---|---|
 |
https://www.wikitree.com/images/icons/privacy30.png |
 |
https://www.wikitree.com/images/icons/bullet30.gif |
Private
| Icon | URL |
|---|---|
 |
https://www.wikitree.com/images/icons/privacy20.png |
 |
https://www.wikitree.com/images/icons/bullet20.gif |
Unlisted
| Icon | URL |
|---|---|
 |
https://www.wikitree.com/images/icons/privacy10.png |
 |
https://www.wikitree.com/images/icons/bullet10.gif |
Status
| Icon | URL |
|---|---|
 |
https://www.wikitree.com/images/status-icon.png |
Relationship
| Icon | URL |
|---|---|
 |
https://www.wikitree.com/images/icons/descendant-link.gif |
 |
https://www.wikitree.com/images/icons/pedigree.gif |
 |
https://www.wikitree.com/images/icons/relationship.gif |
 |
https://www.wikitree.com/images/icons/tree-more-m.gif |
 |
https://www.wikitree.com/images/icons/tree-more-p.gif |
Others
| Icon | URL |
|---|---|
 |
https://www.wikitree.com/images/icons/add.gif |
 |
https://www.wikitree.com/images/icons/ahnentafel.gif |
 |
https://www.wikitree.com/images/icons/check.png |
 |
https://www.wikitree.com/images/icons/cousin-bait.gif |
 |
https://www.wikitree.com/images/icons/edit.gif |
 |
https://www.wikitree.com/images/icons/family-group.gif |
 |
https://www.wikitree.com/images/icons/gear.gif |
 |
https://www.wikitree.com/images/icons/help.gif |
 |
https://www.wikitree.com/images/icons/list-star.png |
 |
https://www.wikitree.com/images/icons/mail.gif |
 |
https://www.wikitree.com/images/icons/map.gif |
 |
https://www.wikitree.com/images/icons/merging.gif |
 |
https://www.wikitree.com/images/icons/photo.gif |
 |
https://www.wikitree.com/images/icons/plus-icon.png |
 |
https://www.wikitree.com/images/icons/plus-icon-dark.png |
 |
https://www.wikitree.com/images/icons/postcard.gif |
 |
https://www.wikitree.com/images/icons/printable-white.gif |
 |
https://www.wikitree.com/images/icons/question-icon.png |
 |
https://www.wikitree.com/images/icons/question-icon-dark.png |
 |
https://www.wikitree.com/images/icons/search-submit-icon.png |
 |
https://www.wikitree.com/images/icons/scissors.png |
 |
https://www.wikitree.com/images/icons/shareable.gif |
 |
https://www.wikitree.com/images/icons/surnames.gif |
 |
https://www.wikitree.com/images/icons/tree-tiny.gif |
 |
https://www.wikitree.com/images/icons/widget.gif |
@harrislineage, I've added this list of icons to the project Wiki to make it easier to locate and it's documentational rather than programming related.
What is the possibility that we could get a gender-neutral version of the gender placeholder gifs? Even if it is the male one with , say, a greenish background?
Those are imho sex-placeholders - only 2 sexes (male & female), gender is something else. Resp. biologically, the child can be only descendant of male & female. How those individuals feel or identify themselves is different thing.
btw, for those privacy bullets before fields (e.g. on Edit page), there is no need for images, just style that link with ccs (adding 2 classes) and it would also work better at dark backgroud (theme) - no jagged light edges.
.privacy-bullet{
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
}
.public{
# I would expect that this color coding could be also used in other places, like lock icons
background: #a7d16e !important;
}
so lets say
<a href="/wiki/Help:Privacy#Public_information" target="_Privacy" class="privacy-bullet public"></a>
would look like
Up - css styled Down - old gif icon
The image for profiles with either no "Sex at Birth" (previously Gender, which is the name of the field out of the API) or with DataStatus.Gender = 'blank' (other/do not display), is:
https://www.wikitree.com/images/icons/no-gender.gif