html 中使用 iconfont、fontAwesome
在HTML中尽量使用iconfont 替代图片有很多好处,而且方便,可以设置大小、颜色 等 可以用于字体的设置。
一、使用iconfont
1、打开iconfont 官网 iconfont.cn。
2、将自己需要的图标添加到购物车。
3、选好之后,在购物车有一个添加项目。随便建一个项目,然后添加。
4、之后在我的项目 里 会有 下载到本地。
5、下载完之后解压。里面有 3 个 HTML文件,打开 里面有 使用教程(3 中引入方式)。
一般取出 .ttf/.css/.woff/.svg/.eot 这几个文件 然后放入一个文件夹,在 要使用的地方 引入 .css 文件,然后
<!-- 引入样式文件 -->
<link rel="stylesheet" href="./css1/myicon/iconfont.css"> <!-- 使用 -->
<i class="iconfont icon-setting"></i>
页面中就可以看到图标了。
二、使用fontAwesome
下载资源,解压之后取出css 文件夹 和 fonts 文件夹 放在一个文件夹中,然后放入项目。
使用时:
引入 css 文件夹下的 .css 文件
<!-- 引入样式文件 -->
<link rel="stylesheet" href="./fonts/FontAwesome/font-awesome.css"> <!-- 使用 -->
<i class="fa fa-car"></i>
很简单的使用,以后可以解放大部分通用小图标了。
html 中使用 iconfont、fontAwesome的更多相关文章
- 微信小程序中使用iconfont/font-awesome等自定义字体图标
小程序不能识别外部字体文件,但是转换成Base64就可以使用字体图标了. 以阿里巴巴的iconfont为例 1.下载图标 先去官网下载喜欢的图标==> 下载解压后的文件夹==> 2.在线转 ...
- vue工程中使用iconfont在线CDN不生效的问题
为什么在vue工程中引入iconfont有时候不生效呢? 请依次使用以下方法 1. 在index.html中引入在线资源 <!DOCTYPE html> <html lang=&qu ...
- Vue.js项目中使用iconfont冲突问题解决
在开发前端项目中,字体图标变得越来越常用.一方面因为它比图片使用起来方便,可以像字体一样修改大小和颜色:另一方面是因为它可以减少请求数量,优化前端性能. iconfont的使用方法很简单,主要由三种引 ...
- 如何在微信小程序中使用iconfont
开篇废话 开发过小程序的童鞋肯定都会遇到这样的问题,当我们在小程序中使用iconfont官方推荐的方法插入字体时,我们总会得到一个打印机(滑稽).那么如何在小程序中正确的使用iconfont呢? 一. ...
- vue项目中引入iconfont
背景 对于前端而言,图标的发展可谓日新月异.从img标签,到雪碧图,再到字体图标,svg,甚至svg也有了类似于雪碧图的方案svg-sprite-loader.雪碧图没有什么好讲的了,只是简单地利用了 ...
- 在react-native项目中使用iconfont自定义图标库(android)
1. 安装react-native-vector-icons yarn add react-native-vector-icons react-native link 如果没有关联成功的话,可以参考官 ...
- vue 中使用iconfont Unicode编码线上字体图标的流程
1.打开http://www.iconfont.cn官网,搜索你想要的图标.添加字体图标到购物车,点击购物车然后添加至项目,点击确定 2.点击图标管理/我的项目,找到对应的文件,点击Unicode,然 ...
- 在微信小程序中引入 Iconfont 阿里巴巴图标库
小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法 一.下载图标 首 ...
- 在 iOS 中使用 iconfont
如何使用自定义字体 在讲icon font之前,首先先来看看普通自定义字体是如何在ios中使用的,两个原理是一样的.这里以KaushanScript-Regular为例: Step 1: 导入字体 ...
随机推荐
- 前台的url通过 ActionName?var1=xx&var2=yy 的形式传给特定action
本文对自己开发的基于lucene和J2EE技术的搜索引擎开发经验进行简单总结.今后可能会从性能的角度总结lucene开发经验.当数据上TB级别后,分布式lucene以及结合分布式文件系统(如HDFS) ...
- JAVA常用设计模式(一、单例模式、工厂模式)
JAVA设计模式之单例模式 import java.util.HashMap; import java.util.Map; /** * 设计模式之单例模式 * 单例模式(Singleton Patte ...
- Linux下,用命令进行 日志分割、日志合并
指定文件大小分割: split -b 10m catalina.out imsoft 以每个文本文件10M方式分割日志 文件合并: cat small_file* > large_file
- EasyUI学习总结(一)——EasyUI入门
一.EasyUI下载 EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:jQuery EasyUI 1.4.1
- MySQL8.0 关闭二进制日志
Binary logging is enabled by default (the log_bin system variable is set to ON). The exception is if ...
- Inotify机制的简单应用
编程之路刚刚开始,错误难免,希望大家能够指出. 一.Inotify机制 1.简单介绍inotify:Inotify可用于检测单个文件,也可以检测整个目录.当检测的对象是一个目录的时候,目录本身和目录里 ...
- 同一个windows server 部署多个tomcat
只需要修改tomcat目录下conf下的server.xml文件即可,修改地方有三个,把下面这几个端口修改了为不同的端口即可,例如我把这几个端口统一减1了 <Server port=" ...
- 关于动态内存malloc和realloc
1.malloc 1.申请的内存长度可以运行时决定,单位是字节 2.申请的内存为连续的内存空间 3.返回的地址可以根据实际需要强转成对应的类型 4.动态申请内存的生命周期是整个程序,除非手动 ...
- asp.net core 2.0 后台定时自动执行任务
自己写一个类继承BackgroundService internal class RefreshService : BackgroundService { protected override asy ...
- Qt配置cmake;运行带参数的程序
配置cmake编译器,步骤如下: 步骤1: Qt下新建一个project. 步骤2: 在该project目录下创建一个CMakeLists.txt文件,并按规范编写该文件. Tip: projec ...