iconfont 在项目中的简单使用

news/2025/5/24 1:50:09

font-class引用


font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。

与unicode使用方式相比,具有如下特点:

  • 兼容性良好,支持ie8+,及所有现代浏览器。
  • 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
  • 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。

使用步骤:

1、登陆http://www.iconfont.cn或者百度iconfont 阿里巴巴矢量图 进入到我的项目(这里可以多人共享)

2、在我的项目中或者在我的购物车 “下载代码”

3、下载下来是个文件夹,将此文件夹放置项目下即可(此文件夹中有3个HTML文件,可用浏览器打开其中一个查看图标)

4、在项目中日引入  iconfont.css  即可

<link href="../iconfont/iconfont.css" type="text/css" rel="stylesheet" />

5、使用图标,一般通过<i>标签或者<span>标签引入相应的图标

<i class="icon iconfont icon-wenxintishi"></i>

 

转载于:https://www.cnblogs.com/tongxuping/p/9258631.html


https://dhexx.cn/news/show-2611982.html

相关文章

分享一些好用的网站

前言 这两年收藏了不少网站&#xff0c;特地整理一下&#xff0c;把一些大家都可能用得上的分享出来&#xff0c;希望能对你有用。 考虑到有一些网站大多数人都知道&#xff0c;所以我就不列出来了。 我把这些网站分为了几大类&#xff1a; 工具类素材类社区类工具类 1、start.…

android愤怒小鸟游戏、自定义View、掌上餐厅App、OpenGL自定义气泡、抖音电影滤镜效果等源码...

Android精选源码 精练的范围选择器&#xff0c;范围和单位可以自定义 自定义View做的小鸟游戏 android popwindow选择商品规格颜色尺寸效果源码 实现Android带有锯齿背景的优惠样式源码 android充值页面效果源码 使用OpenGL实现的自定义气泡形状TextureView。 Andorid时间轴控件…

计算机网络- 应用层协议

收邮件 pop3 110端口 发邮件 STMP 25端口 只开放需要的端口 只开必要的服务。 黑客入侵时&#xff0c;先进行端口扫描 扫到了开启了远程桌面 然后猜密码登陆 修改服务端口 迷惑入侵者&#xff0c;使系统更加安全 服务中只开必要的端口

sql server(常用)

普通用法 //生成 uuid 并转为小写 select LOWER(SUBSTRING(uuid,1,8)-SUBSTRING(uuid,10,4)-SUBSTRING(uuid,15,4)-SUBSTRING(uuid,20,4)-SUBSTRING(uuid,25,12)) from (select cast(NEWID() as varchar(36)) as uuid) s //ea52a7bb-a2aa-44b8-be28-5ebc64defcf9//获取时分秒…

jsp:include /与%@ include %简单总结

一、<% include file"#"%> 处理方式&#xff1a;内容原封不动插入包含页使用该指令的位置&#xff0c;jsp编译器再对这个合成的文件进行编译&#xff0c;编译后的文件只有一个。 包含方式&#xff1a;服务器将两个文件合成后由jsp编译器编译成一个class文件&am…

计算机网络-传输层

UDP协议首部由8个字节 TCP协议实现流量控制 实现拥塞控制 网络堵 TCP面向连接的传输 三次握手 TCP是全双工通信&#xff08;下载电影&#xff0c;打电话&#xff09; 应用程序在TCP缓存中放数据 套接字 &#xff08;IP地址端口&#xff09; 点到点传输 提高信道利用率 就…

查看端口通不通

端口号有tcp协议和udp协议之分 --------------------------------------------------------------------------- tcp协议查询方式&#xff1a; WindowsR输入cmd 运行 输入&#xff1a;telnet 10.50.115.157 8080 -----------------------------------------------------------…

吴恩达《机器学习》课程总结(11)机器学习系统的设计

11.1首先要做什么 本章将在随后的课程中讲误差分析&#xff0c;然后怎样用一个更加系统性非方法&#xff0c;从一堆不同的方法中&#xff0c;选取合适的那一个。 11.2误差分析 构建一个学习算法的推荐方法为&#xff1a; &#xff08;1&#xff09;从一个简单的能快速实现的算法…

web基础之cookie和session优缺点总结

cookie 1.cookie作用,为什么要有cookie? cookie的作用是解决HTTP协议中缺少无状态缺陷的问题 2.cookie生命周期以及存储在哪里? cookie的内容主要包括&#xff1a;名称&#xff0c;值&#xff0c;到期时间&#xff0c;路径和域。路径与域一起构成了cookie的范围,并且是存储在…