字体图标库使用方法

一些字体图标库的网站

https://icomoon.io/app/#/select
http://www.iconfont.cn/
http://www.bootcss.com/
http://www.bootcss.com/p/cikonss/

以第一个链接网站里的字体为例

选择自己需要图标，点击右下角下载下来

继续点击右下角——点击下载

然后下载的文件一般都是这几个基本部件

把fonts文件夹复制到自己的项目中根目录中

打开css文件

把代码复制到自己的某个css文件中，然后html引用，重点注意红笔圈的地方，可以分别引用到单独html对应的css中

配置路径信息——在css中找到font文件夹并找到文件夹下的字体文件

设置图标样式，给个统一的类名，全局调用，比如我这里设置的所有的i标签给一个icon的类名

类样式可以根据自己的项目写一些公共的

我这里直接复制的腾讯课堂的代码过来都可以用，所以说代码这里大同小异，具体不同的可以利用图标的名字，设置不同的类名，再细调

对应的图标类名，引到html图标标签的class处即可

例如：

我这里要用第一个message的图标，我在html中这样引用：

另外我在css中设置其单独样式：

好了，大功告成！

对了，还有兼容ie老爷爷的问题呢，参考下边这两篇文章进行整理：

font awesome ie7兼容问题：http://www.imooc.com/article/18185?block_id=tuijian_wz

CSS Expression用法总结：http://jungle330549598.blog.163.com/blog/static/16650655020121110115448568/

时间： 2024-10-01 07:34:19

字体图标库使用方法的相关文章

css字体图标的使用方法

提要:对于传统的一般用css雪碧(css sprite)来搞,目前大部分网站已经主要字体图标 ,利用font+css 或者font+html 来开发,今天总结了一下,记录之~ css sprite用背景图片定位,兼容性好,图标颜色丰富,但是对于网站缩放来讲,会使图片失真,也不容易维护:而当我们运用字体图标来做这个事的时候,好处就多多了(但是字体图标就是颜色单一,一般可忽略) 1.首先从https://icomoon.io/ 国外的字体图标库非常好下载免费的图标库(也可以自己添加要求添加SVG

封装字体图标库

参考了以下博客: https://blog.csdn.net/Doulvme/article/details/54290450 https://blog.csdn.net/qq_25479327/article/details/77167585 https://blog.csdn.net/muzidigbig/article/details/80371341 查找图标并下载 1.打开阿里的矢量字体图标库(http://iconfont.cn/collections)并登陆. 2.搜寻需要的图标加

vue引入iconfont阿里字体图标库以及报错解决

下载阿里的字体图标库文件,放在\src\assets\font文件夹下面. 安装style-loader,css-loader和file-loader (或url-loader) ,记得--save-dev webpack的配置文件中添加: { test: /\.css$/, use:['style-loader','css-loader'] }, { test:/\.(ttf|eot|woff|woff2|svg)$/, use:['file-loader'] } 入口文件main.js引入

字体图标的制作方法

1.图标的制作: 原料是需要有标准的svg图标知乎引导教程:http://www.zhihu.com/question/29054543 实际操作的第三方网站:https://icomoon.io/app/#/select,类似网站还有http://iconfont.cn(隶属阿里,需要注册) 在网站上传svg文件,然后可以下载到打包的其他格式的文字文件及对应的demo; 2.使用 /* 字体声明部分,声明为jdf*/ @font-face { font-f

iconfont字体图标的使用方法--超简单!

我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名; step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过; step 2:找到图标管理->我的项目->然后新建项目: 右边点

webpack热更新问题和antd design字体图标库扩展

附一张上周末参加jsconf的照片..... 标题也不知道怎么写好,真是尴尬.不过话说回来,距离上一次写文快两个月了,最近有点忙,一直在开发新项目, 今天刚刚闲下来,项目准备提测.借这个功夫写点东西,把新项目上学到的一些好的干活分享一下,以便之后开发的时候能烂熟于心. 本次分享两个干货,正文从这里开始: 1.很多同学在开发项目前端项目的时候会遇到一个比较影响开发体验的事情,就是在更新样式文件的时候,页面不会热更新.当然前提是在webpack配置项里用了 'extract-text-webpac

iconfont字体图标的使用方法

CSS字体图标的制作方法

想制作字体图标, 需要先访问这个网站 , http://fontawesome.io/ 如果打开太慢可以用这个 ,http://www.bootcss.com/p/font-awesome/ 反正是一样的. 下载之后可以看到以下这些文件 , font中是字体, less和scss是css的源文件,src中是一些实例文件自己动手写个demo, 目录如下 demo.html代码如下 <!doctype html> <html> <head> <meta charse

CSS3属性+iconfont字体图标的使用方法

CSS3属性文本阴影:text-shadow:水平阴影垂直阴影模糊度颜色: 可以多组值共同存在,用逗号隔开多层文本阴影的设置:text-shadow:第一层,第二层,第三层: 文本换行: 在单词内部换行: word-wrap:: normal:默认值,不允许在单词内部换行. break-word:允许单词内部换行. word-break:: break-all 允许在单词内部换行 keep-all 允许在换行点换行,单词内部不换行盒子阴影: box-shadow:水平阴影垂直阴影模糊度