{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 做个烂人 的问题《Font Awesome & Unicode》','https://www.manongdao.com/q-1187156.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I'm using (the excellent) Font-Awesome in my site, and it's working fine, if I use it this way:
<i class="icon-home"></i>
But (for some reasons) I want to use it in the Unicode way, like:
<i></i>
But it doesn't work - the browser shows a square instead.
How do I solve this? The CSS path is correct (as the first way of using Font Awesome works).
Edit: I do have the FontAwesome.otf installed.
Be sure to load the FontAwesome style before yours.
You can find FontAwesome's explainations here: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
It does not work, because
<i></i>simply asks the browser to display the Private Use code point U+F015 using an italic typeface. The Font Awesome CSS code has nothing that would affect this. If you addclass=icon-hometo the tag, you will get the glyph assigned to U+F015 in the FontAwesome font, but you will get it twice, due to the way the Font Awesome trickery works.To get the glyph just once, you need to use CSS that asks for the use of the FontAwesome font without triggering the rules that add a glyph via generated content. A simple trick is to use a class name that starts with
icon-but does not match any of the predefined names in Font Awesome or any name otherwise used in your CSS or JavaScript code. E.g.,Alternatively, use CSS code that sets
font-family: FontAwesomeandfont-style: normalon theielement.PS. Note that Private Use code points such as U+F015 have, by definition, no interoperable meaning. Consequently, when style sheets are disabled,
will not be displayed as any character; the browser will use its way of communicating the presence of undefined data, such as a small box, possibly containing the code point number.You must use the
faclass:Just to add on Jukka K. Korpela answer above, font awesome already defined a css selector "fa". You can simply do
<i class="fa"></i>. The catch here is, fa defines the font-style:normal, if you need italic, you can override like<i class="fa" style="font-style:italic"></i>Bear in mind that you may need to include a version number too as you could be using either:
or
You can also use the FontAwesome icon with the CSS3 pseudo selector as shown below.
Ensure to set the font-family to FontAwesome as shown below:
To get the above working, you must do the following:
<head></head>section of your app as shown below: