iconfont的简单使用
2024-08-22 21:43:44
下载-阿里巴巴矢量图标
网站链接:http://www.iconfont.cn/
首页如下: 首页-进入图标库--所有图标--搜索/点击你想要的图标--添加购物车
点击购物车(下载) 如下图:
点击下载代码--存储 即可!
找到存储的位置:
解压--将下图选中的文件存储在新建的文件夹中(命名为icon或者别的名字都行)
引入到你需要用到iconfont的文件中!
=======================================================================
使用(用例代码如下):
可以通过color和font-size等等属性来改变iconfont图标的大小和颜色及其他性质!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="icon/iconfont.css" />
<style type="text/css">
i:nth-child(odd){
color: red;
font-size: 100px;
}
i:nth-child(even){
color: blue;
font-size: 100px;
}
</style>
</head>
<body>
<i class="iconfont icon-backpack"></i>
<i class="iconfont icon-abra"></i>
<i class="iconfont icon-action"></i>
<i class="iconfont icon-augmented-reality-"></i>
<i class="iconfont icon-action-"></i>
<i class="iconfont icon-bellsprout"></i>
<i class="iconfont icon-bracelet"></i>
<i class="iconfont icon-battle"></i>
<i class="iconfont icon-blue-team"></i>
<i class="iconfont icon-camera"></i>
<i class="iconfont icon-candy"></i>
<i class="iconfont icon-bullbasaur"></i>
<i class="iconfont icon-charmander"></i>
<i class="iconfont icon-combat-power"></i>
<i class="iconfont icon-caterpie"></i>
<i class="iconfont icon-crown"></i>
</body>
<script src="icon/iconfont.js"></script>
</html>
测试代码-效果图:
-------------------------------------------------------------------------------------------------------------
最新文章
- common.js js中常用方法
- css中关于position属性的探究(原创)
- Wamp 简单使用方法
- 配置无线网络的时候会提示“Enter Password for Default Keyring to Unlock”
- URL详谈
- WebForm 控件(一)、连接数据库
- 镜像文件、光盘、iso文件、启动盘
- 06 Activity 4中启动模式
- Python3学习之路~4.4 软件目录结构规范
- centos7如何安装zabbix
- PAT B1013 数素数 (20 分)
- android 线程间的通信
- sql面试-查询选修课程的学生
- C++中的字节对齐分析
- talib 中文文档(七):Overlap Studies Functions
- hdu 1054 Strategic Game 经典树形DP
- C++第二次上机5-5
- Android Studio最新稳定版下载 - 百度网盘(更新于2017年7月14日)
- 从golang的垃圾回收说起(上篇)
- 使用MSBuild实现完整daily build流程
热门文章
- Windows基础-使用XAudio2播放音频(本质是WASAPI)
- Java工厂模式浅析理解
- hdu 5124(区间更新+单点求值+离散化)
- hdu 1558(计算几何+并查集)
- React Native解决Android的WebView无法执行injectedJavaScript代码
- 51nod 1087 1 10 100 1000【打表】
- KD-Tree复习笔记(BZOJ1941 &; BZOJ2648 &; BZOJ4066)
- POJ 3420 Quad Tiling (矩阵乘法)
- GIF工具 | 分享几个Gif相关工具
- ubifs笔记