如何将bootstrap图标添加到菜单列表elemnets [英] How to add bootstrap icons to menu-list elemnets
本文介绍了如何将bootstrap图标添加到菜单列表elemnets的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
由于某种原因，某些字体在firefox上无法正常生成，因此我的菜单没有显示字体图标。
我正在寻找引导类型图标替代品，我可以使用字体图标的内容
< li class = menu-list >
< a href = ＃ > < i 类 = lnr lnr-cog > < / i >
< span > Masters < / span > < / a > ;
< ul class = 子菜单列表 >
< li > < a href = AdminUserProfile.aspx > 用户档案< / a > < / li > ;
< li > < a href = AdminChangePassword.aspx > 更改密码< / a > < / li >
< li > < a href = EditEmployee.aspx > 员工列表< / a > < / li >
< li > < a href = AddState.aspx > 州长< / a > < / li >
< li > < a href = AddZone.aspx > Zone Master < / a > < / li >
< li > < a href = AddDistrict.aspx > 区主< / a > < / li >
< li > < a href = AddTaluka.aspx > Taluka Master < / a > < / li >
< li > < a href = RateFixedpage.aspx > 收费Master < ; / a > < / li >
< ; / ul >
< / li >
上述代码中的
，
< a href =＃>< i class =lnr lnr-cog>< / I>
< span> Masters< / span>< / a>
这个elen与类lnr lnr-colg没有显示字体类型图标所以可以qany一个请建议我用什么方法在这里显示图标..
这种带图标类的字体在firefox上没有wqorking
@ font-face { D ： \UI\fonts\digital-7-webfont.eot
font-family：Linearicons-Free;
src ： url（https://cdn.linearicons.com/free /1.0.0/Linearicons-Free.eot);
src ： url（https://cdn.linearicons.com/free/1.0.0/Linearicons-Free.eot?#iefix）格式（'embedded-opentype'），网址（https： //cdn.linearicons.com/free/1.0.0/Linearicons- Free.woff2）格式（'woff2'），url（https://cdn.linearicons.com/free/1.0.0/Linearicons-Free.ttf）格式（'truetype'），url（https：// cdn。 linearicons.com/free/1.0.0/Linearicons-Free.woff)format（'woff'），url（https://cdn.linearicons.com/free/1.0.0/Linearicons-Free.svg#Linearicons-Free ）format（'svg'）;
font-weight ： 400;
font-style ： 正常;
}
。 lnr {
font-family ： Linearicons-Free;
发言 ： none;
font-style ： 正常;
font-weight ： 400;
font-variant ： < span class =code-keyword> normal;
text-transform ： 无;
line-height ： 1;
- webkit-font-smoothing ： antialiased;
- moz-osx-font-smoothing ： 灰度;
}
。 lnr-home：before {
content ： \ e800;
}
请建议
解决方案
修复你的@ font-face从第一行删除本地路径（D：\UI\fonts \ data- 7-webfont.eot）进行声明：
@ font-face {
font-family ： Linearicons-Free;
src ： url（https://cdn.linearicons.com/free/1.0.0/Linearicons- Free.eot）;
src ： url（https://cdn.linearicons.com/free/1.0.0/Linearicons-Free.eot?#iefix）格式（'embedded-opentype'），url（https://cdn.linearicons.com /免费/ 1 .0.0 / Linearicons-Free.woff2）格式（'woff2'），url（https://cdn.linearicons.com/free/1.0.0/Linearicons-Free.ttf）格式（'truetype'），url（https ：//cdn.linearicons.com/free/1.0.0/Linearicons-Free.woff）格式（'woff'），网址（https://cdn.linearicons.com/free/1.0.0/Linearicons-Free。 svg＃Linearicons-Free）格式（'svg'）;
font-weight ： 400;
font-style ： 正常;
}
Hi ,
For some reason some fonts are not generating properly on firefox so my menus are not displaying font icons .
I am looking for bootstrap type icon alternative which i can use insted of font icons
<li class="menu-list">
<a href="#"><i class="lnr lnr-cog"></i>
<span>Masters</span></a>
<ul class="sub-menu-list">
<li><a href="AdminUserProfile.aspx">User Profile</a> </li>
<li><a href="AdminChangePassword.aspx">Change Password</a> </li>
<li><a href="EditEmployee.aspx">Employee List</a> </li>
<li><a href="AddState.aspx">State Master</a></li>
<li><a href="AddZone.aspx">Zone Master</a></li>
<li><a href="AddDistrict.aspx">District Master</a></li>
<li><a href="AddTaluka.aspx">Taluka Master</a></li>
<li><a href="RateFixedpage.aspx">Charges Master</a></li>
</ul>
</li>
in the above mentioned code ,
<a href="#"><i class="lnr lnr-cog"></i>
<span>Masters</span></a>
this elemt with class lnr lnr-colg is not displaying font type icon so can qany one please suggest me what alternative i can use to display icons here ..
This type of font with icon classes are not wqorking on firefox
@font-face {D:\UI\fonts\digital-7-webfont.eot
font-family: Linearicons-Free;
src: url(https://cdn.linearicons.com/free/1.0.0/Linearicons-Free.eot);
src: url(https://cdn.linearicons.com/free/1.0.0/Linearicons-Free.eot?#iefix) format('embedded-opentype'),url(https://cdn.linearicons.com/free/1.0.0/Linearicons-Free.woff2) format('woff2'),url(https://cdn.linearicons.com/free/1.0.0/Linearicons-Free.ttf) format('truetype'),url(https://cdn.linearicons.com/free/1.0.0/Linearicons-Free.woff) format('woff'),url(https://cdn.linearicons.com/free/1.0.0/Linearicons-Free.svg#Linearicons-Free) format('svg');
font-weight: 400;
font-style: normal;
}
.lnr {
font-family: Linearicons-Free;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.lnr-home:before {
content: "\e800";
}
Please suggest
解决方案
Fix your@font-facedeclaration by removing the local path (D:\UI\fonts\digital-7-webfont.eot) from the first line:
@font-face { font-family: Linearicons-Free; src: url(https://cdn.linearicons.com/free/1.0.0/Linearicons-Free.eot); src: url(https://cdn.linearicons.com/free/1.0.0/Linearicons-Free.eot?#iefix) format('embedded-opentype'),url(https://cdn.linearicons.com/free/1.0.0/Linearicons-Free.woff2) format('woff2'),url(https://cdn.linearicons.com/free/1.0.0/Linearicons-Free.ttf) format('truetype'),url(https://cdn.linearicons.com/free/1.0.0/Linearicons-Free.woff) format('woff'),url(https://cdn.linearicons.com/free/1.0.0/Linearicons-Free.svg#Linearicons-Free) format('svg'); font-weight: 400; font-style: normal; }
Once that's done, the font works perfectly in Firefox: Example[^]
这篇关于如何将bootstrap图标添加到菜单列表elemnets的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
