关键词：
最近写了一个使用bootstrap的项目，用到了字体图标，下面简要介绍一下在项目中使用字体图标的一些经验
1.在使用bootstrap时，body默认的字体是西文字体，所以需要手动设置字体
body {
font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
}
2.在声明自己的字体图标时，使用css3的@font-face设置
@font-face {
font-family: "share";
src: url(‘../font/MiFie-Web-Font.eot‘) format(‘embedded-opentype‘),url(‘../font/MiFie-Web-Font.svg‘) format(‘svg‘),url(‘../font/MiFie-Web-Font.ttf‘) format(‘truetype‘),url(‘../font/MiFie-Web-Font.woff‘) format(‘woff‘);
}
3.由于这个项目里使用图标字体的标签(例如i)的类名都是以icon- 开头，给所以使用这种类名的标签加上字体
[class^= "icon-"],
[class *= " icon-"] {
font-family: "share";
font-style: normal;
}
4.在需要使用图标的标签里加上before伪类进行使用
<i class="icon-mobilephone"></i>
.icon-mobilphone::before {
content: "e908";
font-size: 13px;
}
附:
1.可以使用iconMoon上传svg图定义自己的图标字体 设置字符编码(如)也可以设置图标所对应的字母(如A); 网址:icomoon.io
2.图标字体的优势:1.轻量性 2.灵活性 3.兼容性
图标字体切断图标顶部
】图标字体切断图标顶部【英文标题】：Icon-fontcutsofftopoficon【发布时间】：2019-05-2519:38:20【问题描述】：我对CSS中的图标字体比较陌生，现在遇到了以下问题：我有几个包含图标的框。遗憾的是，图标的上半部分被剪掉了。我... 查看详情
vue项目中使用线上字体图标(代码片段)
字体图标我们都很熟悉，但是在一个项目中字体图标用的非常广泛，如果我们把字体图标下载下来，打包时体积也很大，所以我们可以用线上地址引入到public/index.html中使用使用字体图标一、添加到购物车去阿里... 查看详情
如何在页面中使用fontawesome字体图标
...要有这么个"图标主体"库②其次，把这个"图标字体"库,引入html页面(是图标字体库对应的css引入html)③最后，使用"图标字体"库具体操作：制作"图标字体"：①这里以http://www.iconfont.cn为例子，来制作:... 查看详情
glyphicons字体图标
所有可用的图标包括260个来自GlyphiconHalflings的字体图标。GlyphiconsHalflings一般是收费的，但是他们的作者允许Bootstrap免费使用。为了表示感谢，希望你在使用时尽量为Glyphicons添加一个友情链接。如何使用出于性能的考虑，所有图... 查看详情
字体图标的使用(代码片段)
字体图标的使用技术背景很多情况下，我们都希望我们的图标可以缩放，而图片的放大和缩小都会失真，字体图标在这里被运用字体图标的特点可以做出跟图片一样可以做的事情,改变透明度、旋转度，等.. 但是本质其实是文... 查看详情
iconfont字体图标的使用
一、准备工作 1、首先，进入阿里的矢量图标库，在这个图标库里面可以找到很多图片资源，当然了需要登录才能下载或者使用，用GitHub账号或者新浪微博账号登录都可以 2、登录以后，可以搜索自己需要的资源，然... 查看详情
字体图标 vs png 图标
】字体图标vspng图标【英文标题】：fonticonsvspngicons【发布时间】：2012-09-1221:56:51【问题描述】：我使用图标作为标签，但我看到了这个网站：www.fontello.com，您可以在其中使用图标创建字体。但是当我用图标创建字体时，它比我... 查看详情
在wpf中使用字体图标
ICO字体实现步骤 一、到Font-Awesome官方网站下载字体压缩包 二、下载到的压缩包，解压后获得图标字体文件 三、然后把字体文件夹拷贝到项目中，目录为（/fonts/... 查看详情
bootstrap入门组件1：字体图标
Bootstrap入门（七）组件1：字体图标 包括200个来自GlyphiconHalflings的字体图标，允许Bootstrap免费使用。部分可用图标截图： 所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意... 查看详情
使用字体图标(使用iconfont的unicode模式)
参考技术A注意：一定要加类名：class="iconfont",否则图标不出来会显示出一个x号 查看详情
iconfont字体图标的使用方法
我之前因为项目用bootstrap比较多,所以使用fontawesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上... 查看详情
如何离线使用字体图标？
】如何离线使用字体图标？【英文标题】：Howtousefonticonsinoffline?【发布时间】：2020-10-3123:10:01【问题描述】：我目前在我的laravel应用中使用vuetify，它运行良好。vuetify正在使用基于link的material-design-icons，下面的代码使用这... 查看详情
字体图标库使用方法
一些字体图标库的网站https://icomoon.io/app/#/selecthttp://www.iconfont.cn/http://www.bootcss.com/http://www.bootcss.com/p/cikonss/ 以第一个链接网站里的字体为例选择自己需要图标，点击右下角下载下来继续点击右下角——点击下载 然后下载... 查看详情
在 TabViewItem 中使用图标字体 - Nativescript-Vue
】在TabViewItem中使用图标字体-Nativescript-Vue【英文标题】：UseIconFontsinTabViewItem-Nativescript-Vue【发布时间】：2019-06-1717:10:11【问题描述】：我一直在寻找一种干净的方式来为TabViewItem使用字体图标（在我的情况下为iconmoon），但没有... 查看详情
在essentialstudioforwinforms应用程序中使用图标字体
图标字体包含符号而不是数字和字母。在Web技术中，与其他图像格式相比，图标字体占主导地位。由于它们是矢量图形，体积小、易于装载，因此用户可以在不降低质量的情况下上下缩放。但唯一的限制就是单个图标只能用一种... 查看详情
为标签页标签使用字体真棒图标
】为标签页标签使用字体真棒图标【英文标题】：Usefontawesomeiconfortabbedpagetabs【发布时间】：2021-04-2407:28:09【问题描述】：这就是我将标签添加到标签页的方式。我在我的应用程序的各个地方都有很棒的字体图标。我如何在标签... 查看详情
图标字体与svg，哪一个更适合与颤动一起使用？
对于使用图标字体和SVG图标的应用程序大小，性能和可扩展性，长期使用应用程序开发哪个更好？答案我认为Icon字体比SVG更好用。因为需要使用插件来添加SVG图像。如果你使用上千个SVG图像app会很慢。 查看详情
使用 jquery 添加类后，字体真棒图标字体作为输入中的占位符
】使用jquery添加类后，字体真棒图标字体作为输入中的占位符【英文标题】：Fontawesomeiconfontasaplaceholderininputafteraddingclasswithjquery【发布时间】：2016-04-2222:12:22【问题描述】：我正在尝试在搜索输入字段中使用字体真棒图标作为占... 查看详情