iconfont字体图标以及css字体图标在线制作和使用(推荐)
字体图标的制作和使用呢,也不一定非要自己去 https://icomoon.io/ 网站制作,那样子貌似有点麻烦,那么这里给大家一种更简便的操作方式,方便快捷的制作并使用字体图标,同样的,我们还是离不开(阿里巴巴图标库)
(一)字体图标的生成
1>进入到(阿里巴巴图标库) https://www.iconfont.cn/ 并登录 ,搜索到你想要的图标并加入购物车,想要多少加多少哈哈
加入购物车后购物车上有显示你加入图标的数量,如图
点开购物车,显示如下哦,点击按钮添加项目至
出现如下界面,选择自己想要添加的项目目录,就会将购物车图标加入你选择的目录中,没有项目就自己创建一个项目哦,然后点击确定就可以啦
完后就跳到如下页面
当你需要修改图标时,你可以通过编辑笔进行修改颜色,名称等,如下图
好了,图标呢,我们制作完毕
(二)如何使用图标
点击图标上部的字体点此生成就会生成字体图标的在线链接,如下图,复制该链接,引用到你的项目中就ok啦,你就可以使用了
在你的项目中像酱紫引入就可以啦
<link href="https://at.alicdn.com/t/font_984846_2gu8iysd0vt.css" rel="stylesheet">
使用如下,切记,一定要写类名iconfont,否则你的图标就是个方框框儿哈
<div class="form_group"><i class="iconfont icon-user"></i><input type="text" placeholder="请填写用户昵称" name="nickName" />
</div>
想了解更多前端资料长按识别二维码关注小姐姐,阅读美文还能免费领取前端资料哦,笔芯笔芯
iconfont字体图标以及css字体图标在线制作和使用(推荐)相关推荐
- 字体单位 html,CSS字体单位
一.前言 在CSS样式中,当文本缩放的时候使用font-size属性是最难以理解的方面之一.在CSS中,你有4种不同的选择,能够让你设置文本在浏览器中的展示.那么这4种单位哪一种更适合呢?这个问题引发 ...
- html字体变色特效,css字体特效,渐变颜色+动画效果
css属性中有一个background-clip,用于设置绘图的背景,它的值可以是content-box,padding-box,border-box,text,其中text就是把颜色绘制到文字上,还 ...
- html css字体样式颜色,css字体颜色怎么设置?
在CSS中想要设置字体颜色,可以使用color属性.color属性规定文本的颜色:该属性设置了一个元素的前景色:光栅图像不受 color 影响. css要设置一个元素的前景色(在 HTML 表现中,就 ...
- html css字体样式颜色,css字体颜色如何设置?
在网页开发的过程中,有时为了网页的美观,需要给网页中的字体设置不同的颜色.那么怎么设置字体颜色呢?下面本篇文章就来给大家来介绍一下使用CSS设置字体颜色的方法,希望对大家有所帮助. 在CSS中,可以使 ...
- css字体设置透明度,CSS字体透明度怎么设置?
在css中有很多好看的样式都可以实现,css设置出来的样式让整个网页看起来也会非常美观,今天的这篇文章就给大家来介绍一下在css中怎么设置字体的透明度,让你的字体在网页中看起来是透明的. 在css3中 ...
- css字体不能缩小,CSS字体大小在%不降低,当我们缩小浏览器窗口大小
如果你是,这是唯一的CSS原型的证明: html { font-size: 62.5%; } body { font-size: 1em;} @media (max-width: 300px) { h ...
- html中css修改字体,CSS字体设置 DIV内字体设置
CSS设置字体 DIV内文字字体花样如何配置,怎样设置装备摆设对象内笔墨字体样式,比喻黑体.宋体.微软雅黑.英翰墨体等字体如何设置装备摆设? 一.font标签配置字体 我被设置装备摆设为微软雅黑 fo ...
- css字体倾斜角度_css如何实现渐变效果?css背景色渐变与文字渐变效果的实现(代码实例)...
在前端网页开发的时候,往往会用到一些渐变色的效果,这样可以使得前端页面更加美观.那么这些渐变效果是如何用css代码实现出来的?本章就给大家带来css如何实现渐变效果?css背景色渐变与文字渐变效果的实 ...
- html中样式属性有哪些,css字体样式属性有哪些?
css字体样式属性有:1.font-size:字号大小.2.font-family:规定元素的字体系列.3.font-weight:字体粗细.4.font-style:字体风格.5.font:综合设置 ...
最新文章
- 安卓饼状图设置软件_话单及银行卡交易智能分析软件
- 异步爬虫(爬取小说30秒12MB!)Python实现
- Oracle 的检查点队列 (checkpoint queue)
- Winform中设置ZedGraph因设置小刻度导致的竖直虚线显示过多
- HDU3113(工科数学分析之分解)
- c语言马秀丽,C语言程序计 清华大学出版社 马秀丽 刘志妩科后习题9答.doc
- [转]天天生鲜,html效果布局
- zimbra mysql管理_zimbra 命令行管理
- swing tree 去掉双击默认展开 关闭_如何保护自己的电脑,关闭危险端口(一)
- js模拟java的spring
- 北交大计算机老师夏嘉楠,北京交通大学院系部处文件-馆档网.DOC
- Ubuntu安装翻译软件(goldendcit)
- 热强化硅酸钠玻璃建筑玻璃英国UKCA认证—EN 1863-2
- 【读图】钢铁侠 Elon Musk 的传奇人生
- 2022年6月大学英语六级翻译
- 服务器操作系统密码忘记,服务器操作系统密码忘记了
- 准确率100%,阿里商旅账单系统架构设计实践
- 任性!C语言之父:因拒付论文装订费错失博士学位,论文52年后重见天日
- 你真会进制的转换吗?进制之间的快速转换方法(我的转换很快,你忍一下)
- 常用射频器件性能指标