如何在项目中使用icon-font 图标字体

icon-font 图标字体的使用,

方法一:可以在icomoon下载相应的图表字体,官网为:https://icomoon.io/ ?

进去会提供600+的免费图表,如果想要更多的图表字体可选择Icon Library;如图所示:

选择好需要的图标后点击右下角的Generate Font生成图标,生成后download下来,下载好的文件会包含fonts文件夹和css文件、demo.html文件,把fonts文件夹和css文件引入到项目中,css文件需要根据项目路径做相应的字体路径更改,然后在你要显示的地方直接定义好你要用的图标的类名即可,css中的伪类不动。

下面贴代码:

方法二:在阿里巴巴矢量图标库获取图标,地址:http://www.iconfont.cn/plus/h...

同样的查找到你需要的图标,然后添加到你自定义的项目中,再下载至本地,下载好的文件如图:

把四种字体文件和iconfont.css引入到项目中,如果不考虑项目大小和直接拷贝整个文件夹,附图:

此时在你要用到图标字体的地方有两种方式引入图标字体,一种为用该图标的类名;如:

另一种为用该图标的16进制码;如: 

注意iconfont类不管哪种方法都不能去掉。

原文地址:https://www.cnblogs.com/qianduanwriter/p/11809026.html

时间: 2024-07-29 23:54:24

如何在项目中使用icon-font 图标字体的相关文章

在vue项目中使用icon 阿里图标库中的小图标

1.首先找到合适图标,然后点击添加入库,接着点击右上角的购物车图标. 2.你刚才选择的图标就能在侧边栏看到了,选择要加入的项目(提前建好的项目),点击确定. 3.进入我的项目页面,就能看到所有选择好的图标,点击下载至本地按钮. 4.文件解压后,将所有文件复制到如下目录. 5.在main.js文件里引入iconfont.css. 6.现在就可以在项目中引入图标了.必须添加iconfont类,然后再添加图标名字作为类名. 1 <i class="iconfont icontuding"

在iOS中使用icon font

在开发阿里数据iOS版客户端的时候,由于项目进度很紧,项目里的所有图标都是用最平常的背景图片方案来实现.而为了要兼容普通屏与Retina屏的设备,苹果要求每个背景图都要以两种尺寸存(a.png和[email protected]),这让设计师们增加了成本,因为他们每次都得出两份背景图标. 现在在web开发上,icon font技术的应用很广泛,它不仅在解决多分辨率显示问题上很有成效,而且在使用它的时候还能降低不少设计和开发成本. 那么它能不能应用到ios开发上来呢?带着这个疑问,我在github

在网页中画Icon小图标

在网页中画Icon小图标. 现代网页中,绝大部分都采用了Icon小图标的方式.其积分大致分为三类,CSS Sprite,font+HTML,font+CSS. CSS Sprite:又称为CSS雪碧,把网页中零星背景图片整合在一张图片文件夹中,再利用CSS的背景图片技术定位到要显示的位置.优点:减少文本体积和服务器请求次数,从而提高效率. 知识点:background-image background-position(向下向右取的是负值). 特点:1,相对单个图标,节省文本体积和服务器请求次数

vue 项目中使用阿里巴巴矢量图标库iconfont

原文:https://www.jianshu.com/p/38262f18eee2 1.打开iconfont阿里巴巴官网https://www.iconfont.cn 2.新建项目(这样方便后期维护图标库) image.png 3.把需要的图标添加到购物车 image.png 4.打开购物车并选择添加至项目,然后确定 image.png 5.这时候可以在项目中看到你选中的svg图标,这时候可以点击下载至本地 image.png 6.打开下载的zip包就可以看到里面的文件,将下面几个文件取出 im

vue项目中使用阿里iconfont图标

在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标库,先看一下官网 可以看到有将近两百万的图标量,可以说我们想要的矢量图图标这里大部分都是有的,下面直接开始如何在vue项目中使用,方法有两种 方法一:简单粗暴法 1.打开 iconFont官网 选择自己喜欢的图标,并且添加购物车 例如我现在选择三个图标 点击购物车,添加至项目 为了方便可以给项目起一个名字 选

vuecli2和vuecli3项目中添加网页标题图标

vuecli2中添加页面标题图标 1. 将favicon.ico放到项目文件夹根目录下; 2. build/ webpack.dev.conf.js, build/ webpack.prop.conf.js中配置: const HtmlWebpackPlugin = require('html-webpack-plugin') new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', favicon: path

在react-native项目中使用iconfont自定义图标库

1. 安装react-native-vector-icons yarn add react-native-vector-icons react-native link 如果没有关联成功的话,可以参考官方文档手动配置一下 2. 将从阿里下载的iconfont.tff文件复制到以下目录 3. 在android/app/build.gradle中添加: project.ext.vectoricons = [ iconFontNames: ['iconfont.ttf' ] //添加你需要赋值的字符文件

iOS项目中所有icon的尺寸以及命名

一般icon以下几个: Icon.png – 57×57 iPhone (ios5/6) [email protected] – 114×114 iPhone Retina (ios5/6) Icon-72.png – 72×72 iPad (ios5/6) [email protected]  - 144×144 iPad Retina (ios5/6) [email protected]  - 120x120 iphone & ipod touch (ios7/8) [email prote

Vue音乐播放器(三):项目目录介绍,以及图标字体、公共样式等资源准备

我们所有的开发都是基于修改src下面的目录 里面的文件去做开发即可 stylus的使用是需要下载stylus-loader的包的 渲染效果 配置修改eslintrc.js 配置了webpack.base.conf.js文件下的别名就可以通过绝对路径来引入 注意配置别名!! 原文地址:https://www.cnblogs.com/cmy1996/p/9152441.html

Element中(Notification)通知组件字体修改(Vue项目中Element的Notification修改字体)

这个问题纠结很久,一样的写的为啥有的页面就可以,有的就不行: 后来才发现: 先说一下怎么设置: 先定义customClass一个属性,用来写class属性值: 之后还需要修改一下组件里style标签的scoped,并且写对应的css. 这是修改好的,修改之前是这样的. 之后就可以啦,就这样.记得修改一下组件里style标签的scoped 关于这个style标签的scoped意思是局部css的意思, https://blog.csdn.net/weixin_33708432/article/det