关键词：
作为前端，我们经常需要和美工拿字体图标文件，经常遇到的有eot，ttf，woff，svg
拿到字体图标文件，我们就要进行一个字体图标文件css编写，方便后期使用
@font-face
/* 1.首先指定字体的系列,我们指定为字体图标 */
font-family: "自定义字体图标名称";
/* 2.接下来的代码指定了字体图标的路径,兼容了各种移动端浏览器和PC端浏览器,你可以根据自己的需要,删除不必要的兼容 */
src: url(‘eot文件路径‘); /* IE9*/
src: url(‘eot文件路径#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */
url(‘woff文件路径‘) format(‘woff‘),
url(‘ttf文件路径‘) format(‘truetype‘), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url(‘svg文件路径‘) format(‘svg‘); /* iOS 4.1- */
/* 3.这里设置字体图标的默认样式,你可以更改默认样式 */
.自定义字体图标名称
font-family:"自定义字体图标名称" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* 4.下面的代码就是我们的字体图标使用时引入的代码,通过伪元素 :before 引入的 */
.icon-guangpan::before content: "e604";
.icon-zanting::before content: "e64b";
winform关于任务栏图标进程结束后图标无法自动清除的问题！(代码片段)
最近在做一个项目，有2个进程，A进程需要定时把B进程强行kill掉，然后再启动，当时这样会有一个问题，就是强行kill掉的进程在任务栏的托盘图标不会自动消失，必须用鼠标经过那个位置才会消失。这样就导... 查看详情
原创1.1关于阿里图标引用问题简介
一、阿里字体离线应用步骤： 1、访问阿里字体库，将需要的图标添加至自己创建指定的项目； 2、下载至本地； 3、解压缩，新建css、font文件夹，将相应的文件夹复制粘贴到对应路径，如图所示： 放入... 查看详情
关于wordpress中字体加载慢的问题解决方案(转)(代码片段)
2016-04-15最近发现Wordpress有时候加载的特别慢，于是就想办法找了下原因。之前听网上说是因为wordpress用的是Google的字体库，而且是每次都要加载，导致访问慢的，于是当时装了个DisableGoogleFonts的插件，禁用了Google字体，然后装... 查看详情
echarts关于鼠标hover图标显示不正确的问题及解决(代码片段)
问题描述：鼠标悬停的位置和图标上显示的位置不一致！如图：问题原因：在写这些东西的时候，加了zoom属性。bodyzoom:0.85;这就导致了，整个页面的内容缩小了0.85，但是echarts内的坐标轴的标注却没有... 查看详情
vue+elementuinpmrunbuild打包之后字体图标丢失问题(代码片段)
解决办法：找到utils.js文件，（大约在50行）加 publicPath:‘../../‘ //ExtractCSSwhenthatoptionisspecified//(whichisthecaseduringproductionbuild)if(options.extract)returnExtractTextPlugin.extract(use:loa 查看详情
01字体图标iconfont的制作与使用--阿里矢量图库(代码片段)
...kground-size的兼容性问题，不容易控制大小和位置。而使用字体图标 查看详情
css高级技巧(代码片段)
...灵图1.1为什么需要精灵图？1.2精灵图(sprites)的使用2.字体图标2.1字体图标的产生2.2字体图标的优点2.3字体图标的使用步骤2.3.1字体图标的下载2.3.2字体图标的使用2.5字体图标的追加2.6字体图标的加载原理3.CSS制作三角形4.CSS用户... 查看详情
css简单的社会图标字体冲突修复(代码片段)
wpf中应用字体图标(代码片段)
原文:WPF中应用字体图标一、什么是字体图标 我们在进行GDI（图形界面）编程的过程中图标是不可少的。近些年随着网络的繁荣和移动应用的繁荣，矢量图的应用越来越火。 矢量图是... 查看详情
东拼西凑完成一个“前端框架”-字体图标(代码片段)
...目录下都会存放一大堆图标文件，难以维护，同时图标和字体的对齐也是一个麻烦事儿；下面简单列出字体图标的优劣势，内容摘自图标字体的优缺点和使用优势轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，... 查看详情
css使用divi的etmodules图标字体(代码片段)
仿站技术——获取和使用某些网站的iconfont图标字体(代码片段)
...些大型网站的时候经常遇到一个问题：该网站使用了图标字体——iconfont，虽然现在阿里有开源的iconfont库，但是还是没有原网站的效果（本人强迫症但非处女座）。所以此文章介绍一下如何获取和使用网站的iconfont，该技术仅供... 查看详情
wpf字体图标样式(代码片段)
1、在网上下载FontICO字体字体压缩包 FontAwesome矢量图标库 2、下载到的压缩包，解压后获得图标字体文件 3、然后把字体文件夹拷贝到项目中，目录为（/fonts/字体文件） ... 查看详情
html使用字体真棒的社交媒体图标(代码片段)
在wpf中使用fontawesome之类的字体图标(代码片段)
原文:在WPF中使用FontAwesome之类的字体图标我之前在博客中介绍过几个矢量图库网站，在WPF程序中，一般接触到的矢量图标资源有XAML、SVG、字体这三种格式。XAML是标准格式就不说了，SVG并不是直接支持的，不过微软提供了Expression... 查看详情
字体图标的使用(代码片段)
字体图标的使用技术背景很多情况下，我们都希望我们的图标可以缩放，而图片的放大和缩小都会失真，字体图标在这里被运用字体图标的特点可以做出跟图片一样可以做的事情,改变透明度、旋转度，等.. 但是本质其实是文... 查看详情
关于transform属性导致字体模糊的问题(代码片段)
最近写项目时也碰到了字体会模糊的情况，先简单描述一下问题一个宽度固定但是高度auto的弹窗让他在屏幕当中展示（不能使用flex属性），position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);用了以上代码让弹窗居中，后来发现有... 查看详情
[bootstrap入门][组件-glyphicons字体图标](代码片段)
[Bootstrap入门][组件-Glyphicons字体图标]标签（空格分隔）：未分类所有可用图标包括200个来自GlyphiconHalflings的字体图标。GlyphiconsHalflings一般是收费的，但是他们的作者允许Bootstrap免费使用。为了表示感谢，希望... 查看详情