css引入矢量图标_IconFont图标引用的方法步骤(代码) -
thinkphp开发的一个项目,登录成功后又跳转到登录页面,在提交信息后输出session都是正常的,没有问题,但是页面跳转后,session出现丢失现象,无法正常完成登陆。通过查找资料,发现原来是bom头的原因。受COOKIE送出机制...
本篇文章给大家带来的内容是关于IconFont图标引用的方法步骤(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
前端开发会经常用到一些图标。当ui妹子给你提供的图标不能满足你的需求时,可以在 iconfont.cn 上采集并生成自己的业务图标库,再进行使用。
一、生成图标库代码
首先,搜索并找到你需要的图标,将它采集到你的购物车里,在购物车里,你可以将选中的图标添加到项目中(没有的话,新建一个),后续生成
的资源/代码都是以项目为维度的。
来到刚才选中的项目页,点击『生成代码』的链接,会在下方生成不同引入方式的代码,下面会分别介绍。
二、引入
有三种引入方式供你选择:SVG Symbol、Unicode 及 Font class。我们推荐在现代浏览器下使用 SVG Symbol 方式引入。
SVG Symbol
SVG 符号引入是现代浏览器未来主流的图标引入方式。其方法是预先加载符号,在合适的地方引入并渲染为矢量图形。有如下特点:支持多色图标,不再受到单色图标的限制
通过一些技巧,支持像字体那样,通过 font-size、color 来调整样式
支持IE 9+ 及现代浏览器
使用步骤如下:切换到 Symbol 页签,复制项目生成的地址代码://at.alicdn.com/t/font_835630_0rudypqb4a.js加入图标样式代码,如果没有特殊的要求,你可以直接复用 Ant Design 图标的样式.icon {
width: 1em;
height: 1em;
fill: currentColor;
vertical-align: -.125em;
}挑选相应图标并获取类名,应用于页面
你也可以通过使用 Ant Design 图标组件提供的 Icon.createFromIconfontCN({...}) 方法来更加方便地使用图标,使用方式如下:配置项目地址,创建图标组件import { Icon } from 'antd';
const IconFont = Icon.createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.js'
});
export default IconFont;之后可以像使用 组件一样方便地使用,支持配置样式
Unicode
这是最原始的方式,需要三步来完成引入:拷贝项目生成的字体库代码,你可以新建一个样式文件来放置图标相关的样式。@font-face {
font-family: 'iconfont';
src: url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.eot');
src: url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.woff') format('woff'),
url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.ttf') format('truetype'),
url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.svg#iconfont') format('svg');
}加入图标样式代码,如果没有特殊的要求,你可以直接复用 Ant Design 图标的样式。.iconfont {
display: inline-block;
font-style: normal;
vertical-align: baseline;
text-align: center;
text-transform: none;
line-height: 1;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&:before {
display: block;
font-family: "iconfont" !important; /* 注意与 font-face 中的匹配 */
}
}在项目中鼠标移动到要用的图标上,点击『复制代码』,就得到了图标对应的字体编码,现在可以直接引入了:
Font Class切换到 Font class 页签,在页面头部引入下面生成的 css 代码://at.alicdn.com/t/font_835630_0rudypqb4a.css如果不喜欢标签引入的方式,也可以直接拷贝上面链接中的代码到你的样式文件中。如果不喜欢网站默认生成的类名,自己重写这部分代码即可,比如:- .icon-ali-pay:before { content: "\e66b"; } // 修改前
- .monitor-icon-alipay:before { content: "\e66b"; } // 修改后这时你可以选择拷贝图标对应代码(就是类名,如果类名被重写过,这里记得用修改后的),直接使用:
不过我们更推荐将它封装一下:import React from 'react';
const BizIcon = (props) => {
const { type } = props;
return ;
};
export default BizIcon;
现在可以更加方便地使用:
Unicode 和 Font Class 本质上就是字体,你可以通过一些字体的样式属性去控制这种图标的展现,同时浏览器兼容性很好,但不支持多色图标。
相关推荐:
iconfont-矢量图标字体的运用_html/css_WEB-ITnose
iconfont字体图标和各种css小图标的详解
css引入矢量图标_IconFont图标引用的方法步骤(代码) -相关推荐
- css引入矢量图标_WEB 项目开发中的图标管理解决方案
相信很多前端开发人员在项目开发过程中都会遇到这样一个问题:页面的图标发生改动,需要往图标文件中追加新的图标,却因为图标文件已经打包好而无从下手,重新制作一份图标文件吧,要考虑替换整个项目的图标,工程量 ...
- css鼠标点在文字上背景透明,CSS实现文字半透明显示在图片上方法(示例代码)
CSS实现文字半透明显示在图片上方法 在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...
- css引入矢量图标_iconfont css使用矢量图标
标签: http://www.iconfont.cn/ 选区需要的图标 加入购物车然后下载.解压开 第一步:使用font-face声明字体 @font-face {font-family: 'icon ...
- css引入矢量图标_css图标库_css常用的矢量图标大全
当我们在网站中引入外部链接的时候往往使用的是 大家都喜欢target="_blank", 因为新页面打开不影响原来的页面.但是这个存在安全问题, 由target="_bl ...
- statusbar 尺寸 显示图标_CAD状态栏图标显示状态的设置方法步骤
CAD低版本并不支持STATUSBAR变量,通常才低版本也不会出现状态栏不显示的状况.那么大家知道CAD怎么设置状态栏图标显示状态吗?下面是学习啦小编整理的CAD怎么设置状态栏图标显示状态的方法,希望 ...
- php实现一行省略号,css实现文字溢出省略号的四种方法(附代码)
本篇文章给大家带来的内容是关于css实现文字溢出省略号的四种方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在项目中有涉及实现一行或者第几行后加省略号,在实现第几行后加 ...
- CSS阿里矢量图标(字体图标)
网址: https://www.iconfont.cn 1.使用步骤 1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右上角的购物车 4.选择下载代码,下载完成后解压文件 5.把下载 ...
- iconfont怎么引入html,Web页面中引用iconfont图标
阿里妈妈出品的 iconfont 是一个矢量图标管理.交流平台,支持矢量图.位图等格式下载,并提供便捷的前端项目植入引用方法,是当前Web开发中主流的icon解决方案. 想要在前端页面中引入图标,一个 ...
- java怎么引入矢量图标库,阿里图标库怎么使用?阿里图标库iconfont如何使用
阿里图标库怎么使用?阿里图标库iconfont如何使用 网际网络测评 网络评测 2020-3-17 2581 0评论 阿里图标库Iconfont-国内功能很强大且图标内容很丰富 ...
- 阿里矢量图标(字体图标)使用
一.阿里矢量图标(字体图标) 网址:https://www.iconfont.cn/ #### 1.使用步骤 1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右上角的购物车 4.选择 ...
最新文章
- 什么是采样层(pooling)
- 2020-11-9(intent显式意图和隐式意图)
- Synchronize锁继承
- SAP系统中设备管理模块的主要增强出口
- hdu 3081(并查集+最大流)
- bloomfilter的java实现,BloomFilter(布隆过滤器)原理及实战详解
- leetcode —— 206. 反转链表
- dataTransfer对象
- 【SpringBoot】spring boot + mybatis + druid
- mysql安装、配置、连接
- 独立站电商广告和营销洞察
- HTML居中对齐样例
- 开发对接微信卡包会员卡_微信公众号实现会员卡领取功能
- BEVFusion: A Simple and Robust LiDAR-CameraFusion Framework 细读
- 计算机应用基础中专起大专,17秋中国医科大学《计算机应用基础(中专起点大专)》在线作业标准100分答案...
- java locale string_java.lang.String.toUpperCase(Locale locale)方法实例
- 安卓紧急警报_我们的紧急警报系统依赖于重叠的私有服务混乱局面
- Android 10 SystemUI 如何隐藏状态栏输入法图标
- 免费免安装!3s 获取云数据库,MySQL,Mongo、Redis 全都有!
- NXP JN5168 Zigbee 芯片烧录问题
热门文章
- 个人支付免费开通支付宝付款功能(免费签约)支付宝当面付开通集成到网站教程
- 软件项目风险评估报告
- 倒计时3天!这届XIN公益大会很不一般!
- VMware Workstation 14 Pro 安装 Windows Server 2008 R2(完)
- 入门物联网还得靠嵌入式
- VMWare虚拟机最新版的下载与安装(详细教程)
- 带孔的打印纸怎么设置_针式打印机纸张的格式大小该怎么设置?
- 在微博投放广告有哪些优势呢?微博广告推广位置介绍!
- 华为OD(外包)社招技术二面,总结复盘
- [GXYCTF2019]Ping Ping Ping {命令执行总结}