Icons used at WikiTree #58
Comments
|
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 |
|
1st of all, is it posiible to share here (e.g. in archive) icons from 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 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. |
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. |
Wow, cool! |
|
Wow, that's IMPRESSIVE! This is starting point. Thanks. |
|
@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. |
|
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 |
|
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: |
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,...)
The text was updated successfully, but these errors were encountered: