Issue: Replace icons with Font Awesome

Issue Tools
- View Changes

April 27, 2014 10:20 AM

Alfa1

Distinguished Member

Replace icons with Font Awesome

VW is already using font awesome. Replacing the current icons with font awesome will make VW load faster and enhance its design. These icons will also make the use of VW more intuitive. Currently some of the icons used are confusing. As FA are used around the web, people will recognize their meaning.

Here are the replacements that I suggest for the vault/resources/images/icons folder:

- Change vw-area-icon for fa-folder-o in blue
- Change vw-area-icon-new for fa-folder-o in blue
- Change vw-area-icon-mod for fa-folder-o in red
- Change vw-area-icon-old for fa-folder-o in grey

- Change vw-page-icon-ltr for fa-file-text-o in blue
- Change vw-page-icon-ltr-new for fa-file-text-o in blue
- Change vw-page-icon-ltr-mod for fa-file-text-o in red
- Change vw-page-icon-ltr-old for fa-file-text-o in grey

- Change vw-attach-icon-ltr to fa fa-paperclip in blue
- Change vw-attach-icon-ltr-mod to fa fa-paperclip in red
- Change vw-attach-icon-ltr-new to fa fa-paperclip in blue
- Change vw-attach-icon-ltr-old to fa fa-paperclip in grey

- Change vw-book-icon-ltr to fa-book in blue
- Change vw-book-icon-ltr-mod to fa-book in red
- Change vw-book-icon-ltr-new to fa-book in blue
- Change vw-book-icon-ltrold to fa-book in grey

- Change vw-category-icon-ltr to fa-sitemap in blue
- Change vw-category-icon-ltr-mod to fa-sitemap in red
- Change vw-category-icon-ltr-new to fa-sitemap in blue
- Change vw-category-icon-ltr-old to fa-sitemap in grey

- Change vw-chapter-icon-ltr to fa-list-alt in blue
- Change vw-chapter-icon-ltr-mod to fa-list-alt in red
- Change vw-chapter-icon-ltr-new to fa-list-alt in blue
- Change vw-chapter-icon-ltr-old to fa-list-alt in grey

- Change vw-comment-icon-ltr to fa-comment in blue
- Change vw-comment-icon-ltr-mod to fa-comment in red
- Change vw-comment-icon-ltr-new to fa-comment in blue
- Change vw-comment-icon-ltr-old to fa-comment in grey

- Change vw-discussion-icon-ltr to fa-comments in blue
- Change vw-discussion-icon-ltr-mod to fa-comments in red
- Change vw-discussion-icon-ltr-new to fa-comments in blue
- Change vw-discussion-icon-ltr-old to fa-comments in grey

- Change vw-index-icon-ltr to fa-home in blue
- Change vw-index-icon-ltr-mod to fa-home in red
- Change vw-index-icon-ltr-new to fa-home in blue
- Change vw-index-icon-ltr-old to fa-home in grey

- Change vw-island-icon-ltr to fa-retweet in blue
- Change vw-island-icon-ltr-mod to fa-retweet in red
- Change vw-island-icon-ltr-new to fa-retweet in blue
- Change vw-island-icon-ltr-old to fa-retweet in grey

- Change vw-redirect-icon-ltr to fa-share in blue
- Change vw-redirect-icon-ltr-mod to fa-share in red
- Change vw-redirect-icon-ltr-new to fa-share in blue
- Change vw-redirect-icon-ltr-old to fa-share in grey

- Change vw-revision-icon-ltr to fa-edit in blue
- Change vw-revision-icon-ltr-mod to fa-edit in red
- Change vw-revision-icon-ltr-new to fa-edit in blue
- Change vw-revision-icon-ltr-old to fa-edit in grey

- Change vw-template-icon-ltr to fa-list-alt in blue
- Change vw-template-icon-ltr-mod to fa-list-alt in red
- Change vw-template-icon-ltr-new to fa-list-alt in blue
- Change vw-template-icon-ltr-old to fa-list-alt in grey

Of course the icons in blue could also be yellow.

Issue Details

Issue Number 3718

Issue Type Feature

Project VaultWiki 4.x Series

Category Images / Icons

Status Implemented

Priority 7 - Minor Features / Enhancements

Suggested Version 4.0.0 Gamma 5

Implemented Version 4.0.0 Gamma 6

Milestone VaultWiki 4 Gamma X

Software DependencyAny

License TypePaid

Votes for this feature 0

Votes against this feature 0

Attachments 0

Assigned Users (none)

Tags (none)

April 30, 2014 5:52 PM

Alfa1

Distinguished Member

Will you implement this?
Otherwise I will start modification of my VW install.

Reply
May 1, 2014 10:43 AM

pegasus

VaultWiki Team

We spent a lot of time mulling over what the icons for each content type should look like so that they could convey the proper meaning. We do not want to change any icons to Font-Awesome or something else unless they would BOTH look better than the current icons AND serve the meaning of the icon better. Naturally, we don't want to change only some of the icons over, because then lists that include both old and new icons would be even more confusing. So unfortunately this is not going to be a quick change.

That being said, the current design is not even optimal for user modification. Currently, to change an icon, you must modify your wiki stylevar path, and upload your custom icons to it. More, images are loaded as HTML img tags, which is slower loading than setting background-images in CSS. Even if you wanted to modify VaultWiki's icons to FA icons yourself, I don't think it would be easy right now without a lot of work on your part, due to this reason. I will see if we can at least get this part resolved for the immediate future.

Reply
May 2, 2014 12:19 PM

Alfa1

Distinguished Member

Thank you!!!

Reply
June 2, 2014 7:10 PM

pegasus

VaultWiki Team

Completed in vBulletin 4.

Still have to update templates for XenForo and vB3, and add the highlight colors as stylevars.
Should be able to improve the look a bit with CSS gradients or inner shadows. Right now it looks a bit flat compared to the rest of the page elements.

Reply
June 3, 2014 2:12 PM
pegasus

VaultWiki Team
Marking this as implemented in the next release.

Currently the nice gradients/outlines only work in Chrome, Safari, and other Webkit browsers. Other browsers do not support the required "background-clip: text" property. The accepted workaround throughout the web is to use SVG for these cases. We attempted SVG for a while on this, but it didn't seem possible to use SVG without creating specialized SVGs for every possible icon combination. This eliminated much of the benefit of using text-based icons over images, in terms of overhead, customization, and clutter, so after much hesitation, we just let these nice effects die in non-Webkit browsers. Hopefully in the future background-clip: text will be added to the CSS3 spec and implemented across the board.

The forum integration icons are still image-based, since they should reflect the icon design of the rest of the forum index.

Every other wiki status icon is now a span that uses FontAwesome. Each span consists of a string of CSS classes:

Code:

vw-status-icon vw-icon-(...CONTENTTYPE...) [vw-icon-(large|small)] vw-icon-(new|mod|old) vw-icon-(area|page|talk)-(...ID...)

vw-status-icon designates that it is a status icon with FontAwesome as its font.
vw-icon-(CONTENTTYPE) designates which FontAwesome character should be used for this type of content.
vw-icon-(large|small) is optional, and specifies that size of the icon. These sizes are generally based on other icon sizes in the platform. Thus they may or may not look different from the default size.
vw-icon-(new|mod|old) designates the status of the icon. Whether there is a new update, moderated content, or no updates. Most platforms show these differences via color.
vw-icon-(area|page|talk)-(ID) is a unique identifier for the icons used by a specific content item. You can use it to change the FontAwesome character for a specific area, page, or discussion, if necessary.

As of Gamma 6, the /vault/images/icon folder will have most of the previous icon images removed, leaving only images that are still required for other integrations.
Reply
June 12, 2014 8:17 AM

Alfa1

Distinguished Member

pages load much faster now. This is a nice improvement.
How can I adjust the colors and gradient? I want blue instead of yellow icons.
The gradient does not work in firefox?

Reply
June 12, 2014 8:39 AM
pegasus

VaultWiki Team
In order for the gradient to work properly "background-clip: text" is required. Firefox does not support this property. Without it, the icon just looks like a square gradient. The only ways around this are either to use SVG or images. We moved away from images, and the SVG solution is extremely verbose.

We have not added stylevars/props for the icon colors yet. Those will be forthcoming, once we decide on a the way to handle the gradient/border math automatically for a wider range of setting values and across all supported platforms.

Otherwise, you can simply override the color with your custom CSS:

Code:

.vw-icon-new:before { color: #ffcc00; /* change this to blue */ background: -webkit-linear-gradient(top, #fff 30%, #fc0 100%); /* change #fco to blue or a close variant */ -webkit-text-fill-color: rgba(255, 204, 0, 0.5); /* change to the "rgb" for your blue color, with 0.5 "a" */ -webkit-text-stroke: 1px #fc8; /* change to a slightly darker blue for a subtle border */ }
Reply
June 12, 2014 12:09 PM

Alfa1

Distinguished Member

Thanks!

Reply
July 2, 2014 3:53 PM

Alfa1

Distinguished Member

The border does not display in G7. Setting it to 2px still doesnt make it visible.

Reply
July 2, 2014 4:03 PM

pegasus

VaultWiki Team

If you customized vw.css in the last release, please note that vw.css no longer exists. The icon CSS was moved to vw_icon.css and any changes should be applied by directly modifying vw_additional.css instead.

Reply
July 2, 2014 4:26 PM

Alfa1

Distinguished Member

Yes, I found out. I re-added it to additional CSS like this:
.vw-icon-new:before {
color: #6290c4; /* change this to blue */
background: -webkit-linear-gradient(top, #fff 30%, #fco 100%); /* change #fco to blue or a close variant */
-webkit-text-fill-color: rgba(98, 144, 196, 0.5); /* change to the "rgb" for your blue color, with 0.5 "a" */
-webkit-text-stroke: 2px #032a46; /* change to a slightly darker blue for a subtle border */
}

btw: the admin panel doesnt show that the template was modified.

Reply
August 9, 2014 10:53 AM

Alfa1

Distinguished Member

With the latest upgrade additional.css is emptied again. Was this intentional or is this a bug?

Reply
August 9, 2014 11:11 AM

pegasus

VaultWiki Team

Make sure you did not edit vw_additional.css in the Master Style. The Master Style always reverts to default during upgrades.

Reply
August 9, 2014 11:17 AM

Alfa1

Distinguished Member

I did not edit the master style, but a child style.
But why does it revert during upgrades?

Reply
August 9, 2014 11:40 AM

pegasus

VaultWiki Team

XenForo assumes that the template XML imported is always the current public version of the Master Style. If you edit a template in the Master Style, it will always be overwritten by upgrades (similar to file edits being overwritten by upgrades). This is the way XenForo has always worked, and the way vBulletin has always worked.

However, if your customizations were made in a custom style, then this should not have been affected by any upgrade.

Have you noticed a similar problem when upgrading VaultWiki in the past on XenForo, where customized templates were reverted?
If not, did you upgrade VaultWiki before or after upgrading XenForo to 1.4? It is possible that the behaviors of some delete methods were changed (specifically the one intended to remove templates that no longer exist), and VaultWiki's upgrade script may need to use a different method now.

EDIT: I think I got a handle on what has happened. See: https://www.vaultwiki.org/issues/3909/

Reply

+ Reply

All times are GMT -4. The time now is 6:00 AM.

This site uses cookies to help personalize content, to tailor your experience, and to keep you logged in if you register.
By continuing to use this site, you are consenting to our use of cookies.

Learn more… Accept Remind me later

Welcome to VaultWiki.org, home of the wiki add-on for vBulletin and XenForo!

Issue: Replace icons with Font Awesome

Issue Tools