Forums

Regarding your second (more recent) question: I may not understand what you mean about poor flow, but I think I can help. When resizing the browser after the code you’ve used above has been inserted, the login form moves to below the list of forums, but the yellow icon arrow doesn’t stay in place relative to the form.

This is because it’s essentially positioned in the top-right corner of the form container. If you change your CSS to make the icon appear in the corner of the form itself, your issue should be fixed – i.e., use #login-form:after rather than #widget-login:after. You’ll need to adjust margins a little to get it looking correct. I found that using {margin-right: 0; margin-top: -68px;} did the trick.

You may be aware of the following points, but just in case, here are two little bits worth noting: First, some older browsers (IE8) won’t accept :after, but will accept :before, so using :before is preferable is possible. You may need to use absolute positioning (on the :before pseudo-element, with relative positioning on the container) to get your icon in the right place though.

Second, since you’re replacing your form submit button with something else, you’ll need to both use Javascript or jQuery to handle the onclick event so the faux button is still clickable, and will also need to provide a non-JS fallback.

Hope that helps, apologies if you’ve already considered this stuff!

A quick look at your code with the inspector shows that on the linkage page you’re still using an image that I assume you deleted, that’s the reason it’s not showing up. So my guess is that you might have the same problem on several other pages.

You are using an old version of FontAwesome – you’re using 4.0.3, the latest version is 4.2.

Use the latest version, then you’ll be able to use the fa-university (aka bank/institution) character.

View your site source and Ctrl+F for “font-awesome”. The first result shows that the plugin “Symple Shortcodes” has included an outdated FA stylesheet.

There might be settings for this plugin which allow you to stop this from happening. If you have to use the plugin and there aren’t settings available, you could edit the plugin – although be sure to prevent it from updating (by using another, selective update prevention plugin, or by increasing the plugin’s version number to something very high).

Alternatively, the plugin “Better Font Awesome” has an option to prevent the inclusion of other FA stylesheets by other plugins. That’s the plugin I use in my projects, and it works beautifully – it also allows you to include icons via shortcodes, and from a TinyMCE dropdown menu in the Visual Editor.

No problem, happy to help!

Please check your source again (via view source) – there’s another FA stylesheet, from the plugin Team Showcase.

Glad you got it sorted :)

To view the page source – on using Chrome, you just right-click and choose View Page Source (or, press Ctrl+U). Other browsers can do a similar thing with the context menu, the option is just named differently across most browsers.

Regarding the crossed-out rules in IE – I think it’s because IE doesn’t seem to handle coding with peudo-selectors very well. So, in Chrome, :before and :after elements are actually selectable in the DOM/CSS inspector (i.e., right-click > inspect element), but IE doesn’t have this option.