css3 - 字体图标库使用方法
一些字体图标库的网站
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/
-------------------------------------------------------------------------------------正经分割线!!!--------------------------------------------------------------------------------------------------------------------------
声明:
请尊重博客园原创精神,转载或使用图片请注明:
博主:xing.org1^
出处:http://www.cnblogs.com/padding1015/
css3 - 字体图标库使用方法相关推荐
- uni-app引入阿里字体图标库
1.官方地址 2.阿里巴巴字体图标库使用方法 (1).注册账号 (2).创建项目 (3).找到喜欢的图标 (4).将自己喜欢的图标加入到项目中去 (5).生成代码并下载到本地 (6).将iconfon ...
- uni-app之阿里字体图标转base64方法
uni-app之阿里字体图标转base64方法 uni-app开发过程中发现小程序端不能直接使用字体图标,需先转成base65方可使用,转换方式如下. 一.转换步骤 1.1 从iconfont下载字体 ...
- 精灵图与字体图标的区别和用法(附Icomoon字体图标的使用方法)
CSS苦逼学习日记(6) 精灵图 1.精灵图是什么?: 把许多小图标都放在一个大图片上,这样利用小图标的时候只需要重复使用多次利用同一张大图片,减少加载各种图片路径的时间,减小程序(网页)的运行速率, ...
- Canvas 绘制字体图标库
1.首先,你要引入一个字体图标库 – iconfont 阿里的字体图标库 将链接复制到浏览器,将获取到的css 代码复制到自己的项目 代码中 其他的不一一赘述,没有用过 iconfont 的 可以看 ...
- Font Awesome字体图标库
Font Awesome字体图标是一款开源的字体图标库,可兼容BootStramp,官网:https://fontawesome.dashgame.com/ 安装方法简单,将压缩包中的fonts与Cs ...
- 在Uni-App中使用阿里字体图标库
在使用Uni-App框架开发微信小程序时,需要用到阿里字体图标库,本来是在public/index.html中通过link引入了图标的在线地址,通过npm run serve运行到浏览器上可以正常显示 ...
- 云炬Android开发笔记 3-2字体图标库集成与封装
1.项目:android-iconify点此链接到Github 这是一个字体图标库,用字体来代替很多图片. Android开发经常将很多本地图标放在drawable和mipmap文件夹下,这样有一些坏 ...
- 安卓开发使用ttf文字_Android中正确使用字体图标(iconfont)的方法
字体图标 字体图标是指将图标做成字体文件(.ttf),从而代替传统的png等图标资源. 使用字体图标的优点和缺点分别为: 优点: 1. 可以高度自定义图标的样式(包括大小和颜色),对于个人开发者尤其适 ...
- iconfont字体图标的使用方法
今天来谈谈iconfont字体图标的使用方法 一.打开阿里巴巴矢量图官网 阿里巴巴矢量图官网 界面如下: 二.选择登录:可以使用GitHub账号登录,用其他账号也可以这里我选择用GitHub账号登录 ...
最新文章
- dsp-asic-fpga
- ArcGIS for Desktop入门教程_第二章_Desktop简介 - ArcGIS知乎-新一代ArcGIS问答社区
- 领导应该怎么当?盯目标、抓计划、管时间、做农夫、当仆人……
- Matlab 训练深度学习模型函数 trainingOptions
- 轻松掌握Ajax.net系列教程
- Oracle中如何插入特殊字符: 和 ' (多种解决方案)
- Spring@主要注释
- 服务器最小化安装后的优化脚本
- 18awg线材最大电流_小米生态链拉车线:2.4A大电流,苹果MFi认证,高速充电不断裂...
- eclipse lombok 标红_无法使Lombok项目在Eclipse上运行
- C#委托 模板和回调函数
- STM32F103使用硬件i2c作为从机模式
- 【Arduino 101】霍尔编码器(增量,正交)与起停式闭环控制
- mybatis PageHelper.startPage出现limit错误
- 方文山------周杰伦御用作词
- SegeX MemDialog:封装好的内存对话框(非资源对话框)说明
- android 斜线 绘制_Android 自定义 斜线进度框 ,雨点式背景
- git 撤销提交 撤销暂存区 取消操作
- 2020新冠疫情下如何防范恶意软件攻击避免数据泄露?
- JAVA_SE_Day14