Is it just me or there are actually icons in FontAwesome 3.x.x that are missing from FontAwesome 4.0.0? If so, this definitely makes FontAwesome much less awesome for me...
For example, I can't seem to find the equivalent to icon-remove (there is no fa-remove, or fa-delete as far as I can tell).
Having to rename all icon references in my application is annoying enough. Not being able to reproduce what was possible in 3.0 is really, really bad.
Not being able to access v3.x cheatsheet and other documentation any more: unacceptable!
icon-remove is renamed to fa-times in v4.0.0.
Quick comparison:
old one
new one
Note that some icons that seem to be missing can be easily constructed using stacking options - I have created an example for icon-remove-sign replaced by fa-times stacked on fa-circle.
Note: As #VaclavElias pointed out, icon-remove-sign is now fa-times-circle. The above is just an example of stacking.
The 4.0.0 release has the same icons as 3.2.1, but the naming conventions and many of the individual icon names have been changed.
You can view a list of changes that Geremia Taglialatela compiled over on the Github wiki for Font Awesome:
Upgrading from 3.2.1 to 4
Also, you can still access the documentation for 3.2.1 here
I wrote a little LESS file that allows the integration of the old names into the new FontAwesome version.
For this is took the list Michał Rybak posted: Upgrading from 3.2.1 to 4.0
If anyone is interested in downloading, you can find it on Github: Download v3 to v4 FontAwesome Integration
--EDITED--
Michal Rybak is actually spot on. You should submit that as an answer. The icon looks exactly the same. Can't believe I missed that.
Though I'd like to point out, in the FA site it says, if you know what it looks like you know the class name in 4.0, It think it looks like a cross, or X. I would have never guessed "times"
--ORIGINAL--
I came here looking for fa-remove as well! That's disappointing. Now it looks like I have to revert back to a previous version after having migrated 2/3rd of my app to the new version.
To answer your point about documentation: The old version can be accessed here:
http://fontawesome.io/3.2.1/
I found the link while browsing through their site and stumbled upon their notice about no IE7 compatibility.
This definitely needs to be linked (atleast) in the footer
I have noticed that the Wikipedia icon is still missing on 4.0 and even 4.3
but this workaround worked for me:
.fa-wikipedia:before { font-family: "Times New Roman", Times, serif; font-weight: 400;
content: "VV"; letter-spacing:-0.45em; margin-right:0.5em; }
http://jsfiddle.net/fLktadyn/8/
Related
I have a Jekyll blog, where I changed the code highlighter from Rouge (the default) to highlight.js, and it works perfectly.
However, I also want line numbers on my code snippets. Since highlight.js does not provide line numbers by default, I turned to the highlightjs-line-numbers plugin.
I followed the instructions given in the highlightjs-line-numbers usage instructions, and added the relevant lines to my _includes/script.html.
However, for some reason, adding this plugin mysteriously changes the code font to Arial. Here is a link to a blog post which demonstrates this odd side effect.
I have tried to figure this issue out for hours, to no avail. Does anyone know what I am doing wrong, and why this code font change is occurring?
Edit: The current GH Pages is being built from the custom-liquid-tag branch of my repository, and not main.
Updated Answer
This answer was not able to help OP with the problem. Keeping this answer here so the comments remain intaked.
Original Answer
I think you are missing the import of the highlightjs stylesheet that goes with the highlight JavaScript in your file scripts.html [1]
https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css
[1] https://github.com/wermos/blog/blob/main/_includes/scripts.html
As a sort of last-ditch effort, I opened an issue on the highlightjs-line-numbers repo to get some feedback from the author of the library himself.
Luckily for me, he responded, and the solution he proposed was indeed correct:
In my repository, the theme I am using, minimal-mistakes, was overriding the table CSS style and breaking the font. Since the line numbers plugin uses the table CSS style, the end result was a messed up font.
The error went away after I manually added
table {
font-family: $monospace;
}
to my main.scss.
For the sake of completeness, here is a link to how minimal-mistakes defines $monospace.
I need a fresh download of FA version 4.0.3 as the CMS I use contained a damaged copy. I tried using the latest (4.7.0 at this time), but CSS changes in the .fa selector cause placement issues. I'd like to roll back to 4.0.3 to maintain compatibility until we can do a whole-site regression test for this type of bug once we upgrade.
Instead of complaining in the comments, I'll just drop this in here as a weak answer.
Either you download and stash it somewhere because you need to make changes (and then reference the CSS and other assets in the appropriate way as desribed on the Get Started page) or you use a reference to a CDN in a link to a stylesheet, in which case you can specify the version in the URL.
It sounds like you are doing the former, but you should be sure. Maybe you can just use the CDN link? At any rate, you can fetch 4.0.3 from the GitHub repo
I was able to get a hold of v4.0.3 via the GitHub Releases feature.
Having done that, I discovered that somebody had modified the CSS file in our CMS to add margin-right: 5px -- and it was one of the CMS's developers! Naughty, naughty!
SO, the 'incompatibility' I saw was not between the official, unmodified 4.0.3 and 4.7.0 versions of FA. Sorry about the false alarm! And thanks for your help. :)
recently was released new version of Font Awesome 4.0. That's great! But is there any way how to get the list of icons for previous version 3.2?
I'm still using it and i cant remember all icon names. :) And also I can't upgrade to 4.0 or at least not now. Thanks in advance.
They're here: http://fortawesome.github.io/Font-Awesome/3.2.1/icons/
I really think this should be linked somewhere on v4 site.
Also read upgrade guide with full list of changed names.
One of the web application I developed uses Primefaces 2.2. I'm delaying the migration to 3.X because I think the users are more comfortable with the 'old' look and feel of some components.
In the calendar I liked the 2.2 icon on the popup button and I would like to go on with it. Unfortunately it seems the easy way to achieve this goal, the attribute popupIcon, is no more supported, despite it is still present in the guide for 3.X
FileUpload was completely rewritten and its look is radically changed: now in the auto mode the browse (choose file) button is inside a rounded box with a background image and color set. I preferred the 2.X look, where there is no rounded box. Besides making some tests with Internet Explorer 9 I noticed the UploadedFile.getFileName() gives now the full path of the file, while I have functioning code expecting only the file name without path. The migration guide tells nothing about this change which is completely undocumented.
I believe the original look and feel can be restored with some css override, but I have already tried without success reading also this
Primefaces: how to change the default icon on the button of the calendar field?
and I would like to receive some advices.
My major concern is that css modifications can affect other components, so it is necessary to be very specific.
Thanks
Filippo
I don't think there is a quick fix, in fact I think it will be a lot of work. As you said yourself, the look and feel for some elements has changed a lot. However PrimeFaces is highly customizable when it comes to styling.
I suggest you download the manual from the PrimeFaces site (PDF) and get to work using CSS as your weapon of choice. Maybe you can re-use the CSS of PrimeFaces 2.x as a reference.
So since I've got major problems with the sIFR3-mousescroll issue in sIFR3 r436, I wanted to find out if that problem has been solved in the newest update. But the problem is that the new version tells me the *.swf I'm using is only compatible with r436. I've used sifrgenerator.com to create my font. Is there a newer converter, or another way to convert my .ttfs?
Oh and it would be nice if someone could tell me if the new sIFR update solves the scrolling-problem!
Thanks!