[英]Font Awesome unicode icon is not working in firefox
Here is my html code.这是我的 html 代码。
<label><b>Phone Verified : </b></label>
<select class="form-control phone_verified">
<option value="">Select Option</option>
<option value="1">Yes ()</option>
<option value="0">No ()</option>
</select>
I've linked cdn bootstrap link我已经链接了 cdn 引导程序链接
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<style type="text/css">
select {
font-family: 'FontAwesome', 'open sans'
}
</style>
In my chrome browser icon working perfect.在我的chrome 浏览器图标中完美运行。
But in firefox not working.但是在Firefox 中不起作用。
I followed this font awesome icon in select option我在选择选项中遵循了这个字体真棒图标
Can anyone tell me what I'm doing wrong?谁能告诉我我做错了什么?
check JSFiddle Link :- https://jsfiddle.net/17j8pxqb/检查 JSFiddle 链接:- https://jsfiddle.net/17j8pxqb/
Unfortunately, this is an old issue with several browsers, especially Firefox on Mac OS X. There is a hack where you add a "multiple" attribute to the select tag, but this will alter the nature of your dropdown box and can result in unwanted input from the users.不幸的是,这是几个浏览器的老问题,尤其是 Mac OS X 上的 Firefox。有一个技巧,您可以在选择标签中添加“多个”属性,但这会改变下拉框的性质,并可能导致不想要的来自用户的输入。
<select multiple class="form-control phone_verified">
<option value="">Select Option</option>
<option value="1">Yes ()</option>
<option value="0">No ()</option>
</select>
I have a workaround, a solution and some reasoning why this is happening...我有一个解决方法,一个解决方案和一些为什么会发生这种情况的推理......
Example:例子:
https://jsfiddle.net/mbaas/zLapqy3u/ https://jsfiddle.net/mbaas/zLapqy3u/
font-face
font-face
Add the font-face
-declaration from FA's CSS:添加来自 FA 的 CSS 的
font-face
声明:
@font-face
{
font-family: 'FontAwesome';
font-style: normal;
font-weight: normal;
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.1') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.6.1') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.6.1') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.6.1') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.6.1#fontawesomeregular') format('svg');
src: url('../fonts/fontawesome-webfont.eot?v=4.6.1');
}
Note that you this code refers to some font-files which you will need to provide as well.请注意,此代码指的是您还需要提供的一些字体文件。
Actually...it would recommend to not call this font FontAwesome
, because that could overlap with FA and cause unintended side-effects.实际上...建议不要将此字体
FontAwesome
,因为这可能与 FA 重叠并导致意外的副作用。 Better use a unique name.最好使用唯一的名称。 To be clear:
要清楚:
@font-face
{
font-family: 'FontAwesome_Dilip';
font-style: normal;
font-weight: normal;
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.1') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.6.1') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.6.1') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.6.1') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.6.1#fontawesomeregular') format('svg');
src: url('../fonts/fontawesome-webfont.eot?v=4.6.1');
}
and和
select { font-family: '
FontAwesome_Dilip ', 'open sans' }
select { font-family: '
FontAwesome_Dilip ', 'open sans' }
Also I want to suggest using a specific style for this font-family in preference to applying it to all select
-controls.此外,我想建议对此字体系列使用特定样式,而不是将其应用于所有
select
控件。
It might be some sort of optimization where FF does not bother processing the @font-face-declation
from FA-CSS, because it is not used (none of the actual styles from the CSS is referenced.).这可能是某种优化,其中 FF 不费心处理来自 FA-CSS 的
@font-face-declation
,因为它没有被使用(没有引用来自 CSS 的实际样式。)。 So then my simple <i class="fa fa-check"></i>
fixed it...然后我简单的
<i class="fa fa-check"></i>
修复了它......
As long as you only use yes
or no
in the select, everything is fine.只要你只在选择中使用
yes
或no
,一切都很好。 Try adding the word Key
to your options just to see what's possible ( this is an effect which wasn't generally reproducible, but using Chrome I had this very problem. But I'm also using FontAwesome-Font in my Windows-System and I suspect this caused the effect.) : you may end up seeing the smybol twice, because "key" is used as a ligature in the font-definition to generate the same symbol.尝试将
Key
添加到您的选项中,看看有什么可能(这是一种通常无法重现的效果,但使用 Chrome 我遇到了这个问题。但我也在我的 Windows 系统中使用了 FontAwesome-Font,我怀疑这导致了效果。) :您最终可能会看到两次 smybol,因为“key”在字体定义中用作连字以生成相同的符号。 So the advantage of declaring a font-face specifically for that usage is that you can add font-variant-ligatures: none;
因此,专门为该用途声明 font-face 的优点是您可以添加
font-variant-ligatures: none;
to the CSS-Style for select
to disable ligatures.到 CSS 样式以
select
禁用连字。
What you are looking for is inclusion of -webkit or -moz in your css document.您正在寻找的是在您的 css 文档中包含 -webkit 或 -moz。 Chrome supports it but for mozilla to support this use "-moz-".
Chrome 支持它,但 mozilla 支持使用“-moz-”。
For further information on this go to the link below and you'll find everything related to it!!有关这方面的更多信息,请访问下面的链接,您将找到与之相关的所有内容!! https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions
https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.