首页>>前端开发
首先什么是字体图标呢,那就是表面上是图标,其实它是文字,我们可以就像设置文字一样去设置字体图标,一般可以使用两种方式去设置字体图标,一种是引入css文件,然后设置特殊的class就可以了;另外一种是通过伪元素中的content去设置,下面跟我一起来看看 如何设置吧!
1:引入css文件,然后设置特殊的class去使用字体图标
我使用iconfont官网来进行实验,首先使用百度搜索iconfont,进入官网之后登录,登录之后先去新建 一个项目,首先打开我的项目:
点击新建项目图标:
然后输入项目名称,点击新建:
之后就可以去上方搜索框搜索你想要的图标了,例如输入“天猫”,点击回车,然后把鼠标放在你想要的图标上面,点击购物车图标添加入库:
之后在右上角打开购物车图标,点击添加至项目 ,选择你的项目名称点击确定就可以了,我的项目名称是“HelloWorld”:
之后就会进入我的项目里面,该项目正是你上面添加图标的那个项目,如果你想在本地使用的话,点击下载至本地:
下载完成之后解压,把解压文件中最里面的所有文件(以css、eot、woff等结尾的文件)复制到我项目下方的某文件夹下,该文件夹可以随意命名:
之后在html文件里面引入里面的iconfont.css文件:
使用的方法是在我想要放置图标的元素的class中首先加入iconfont,之后在加入该图标的名称,名称如下:
如果要使用该名称,只需要把移动到该图标上面,在弹出框中点击复制代码就可以了:
之后就可以直接去使用了:
其中iconfont是必须的,后面的是我们上面复制代码后的名称
如果你不想下载到本地的话,你也可以使用在线css文件来做,首先我们找到iconfont官网中上述项目那个界面,首先点击“Font class”,然后点击“暂无代码,点此生成”,之后我们就可以看到一个链接:
那我们就不需要下载文件了,也不需要导入相关文件了,只需要在使用图标的html代码中引入css文件:
之后就可以直接去使用了,class依然里面需要包含 iconfont,之后需要包含图标的名称作为class,图标名称还是通过“复制代码”的方式获得:
之后就这样写就可以了:
2、通过伪元素中的content去设置
通过上面的步骤可以把图标添加到项目中,由于上面的那种引入方式已经叙述过了,这里在叙述,假设我们现在已经把图标引入到项目中了,我们依然可以先下载到把项目下载到本地,在上一个方法中已经说了,这个也不再叙述,之后把里面以eot、woff2、woff、ttf、svg结尾的文件复制一下,然后把这些文件赋值在我们的项目中的某个文件里面:
之后在css文件中引入这些文件,方法如下:
@font-face { font-family: 'iconfont'; src: url('../fonts/iconfont.eot'); src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/iconfont.woff2') format('woff2'), url('../fonts/iconfont.woff') format('woff'), /* Modern Browsers */ url('../fonts/iconfont.ttf') format('truetype'),/* Safari, Android, iOS */ url('../fonts/iconfont.svg#iconfont') format('svg');/* Legacy iOS */ }
以上的font-family是我们自己定义的,需要在url中引入这些文件,url()中的单引号里面是这些文件相对于这些css文件的url地址,里面的#iefix
、#iconfont
不能少,其中#iefix
是固定不变的,而#iconfont
中的名称是font-family
中的名称,他们需要加在相应文件名称的后面,format()中的内容不能变,你可以先把上述的内容复制到你自己的里面,只根据后缀名去更改相应的url地址就可以了,别乱改不然会出错,由于我们会多次使用里面的图标,所以我们需要把某些属性放在公共的class中,如下所示:
[class^="icon-"], [class*="icon-"] { font-family: 'iconfont'; font-style: normal; }
这代表只要class中包含有icon-
就会有font-family和font-style属性,该font-family
的名称就是@font-face
中的font-family
中的名称,如果我们需要使用该class属性的话,那就htm文件中的元素的class里面加入以icon-
开始的名称,如下所示:
之后我们就可以设置相应的图标了,一般是利用伪元素来设置,在css中可以这样设置:
至于里面的content内容,前面的是固定的,后面的e799是这里来的,我们回到iconfont官网,找到我们项目中的图标,在上面停留之后,点击编辑图标:
复制“Unicode(16进制)”下面的内容:
这就完成了
如果你不想下载到本地的话,你也可以使用在线Unicode编码,首先我们找到iconfont官网中上述项目那个界面,点击“Unicode”,然后点击“暂无代码,点此生成”,之后我们就可以看到一个链接:
复制链接内容,这样我们就不需要复制文件到项目中了,只需要把上述链接内容放置到css文件里面:
@font-face { font-family: 'iconfont'; /* project id 2074612 */ src: url('//at.alicdn.com/t/font_2074612_ndaz958615n.eot'); src: url('//at.alicdn.com/t/font_2074612_ndaz958615n.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_2074612_ndaz958615n.woff2') format('woff2'), url('//at.alicdn.com/t/font_2074612_ndaz958615n.woff') format('woff'), url('//at.alicdn.com/t/font_2074612_ndaz958615n.ttf') format('truetype'), url('//at.alicdn.com/t/font_2074612_ndaz958615n.svg#iconfont') format('svg'); }
之后就在css中写:
[class^="icon-"], [class*="icon-"] { font-family: 'iconfont'; font-style: normal; }
之后还要写上,content中的内容到底是什么在上面有详细说明,不在赘述:
.icon-tianmao::before { content: 'e799'; }
然后html文件中的它也不能少,这些都在第二种方法中有详细解释,这里就 不在赘述了:
<i class="icon-tianmao"></i>
到此这篇关于让我来教你使用css中的字体图标的方法的文章就介绍到这了,更多相关css字体图标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
- 上一篇: 导航栏吸顶简单代码解决
- 下一篇: Img{ Max-Width:100%}影响百度地图呈现
猜你喜欢
- 2024-02-23 提高小红书运营效率的6个工具
- 2022-11-10 【官方文档】百度搜索网站被黑防范指南
- 2022-11-03 【干货必备】百度搜索优质内容指南
- 2022-08-01 百度隐藏“快照”功能:原因未知-百度快照没了?
- 2022-06-20 浅析“百度搜索基础信息设置规范”!
- 2022-06-15 SEO尴尬,有排名,没流量,没咨询,怎么办?
- 搜索
-
- 2024-03-14 刷量成风,广告主损失惨重?该被重视了!
- 2024-03-06 代理投的好,还需要招自己的优化师吗?
- 2024-02-23 提高小红书运营效率的6个工具
- 2024-02-23 千川投放百宝书:2万字详解,一篇全掌握!
- 2024-02-20 年后求职15个关键面试问题,助优化师脱颖···
- 2024-01-31 不行就去做销售吧!
- 2024-01-09 合格的优化师,需具备这6项思维能力!
- 2023-12-28 25个金句文案句式,直接套!
- 2023-12-05 做私域必备的10个朋友圈黄金模板
- 2023-12-05 15个爆款短视频文案技巧,看完立马用!
- 2023-11-27 浅析:《百度搜索优质内容解读》,当下百度···
- 2023-11-21 10年老兵看搜索广告的过去、现在和未来
- 2019-11-01 Origin DNS error:使用百···
- 2020-06-20 “401 - 未授权: 由于凭据无效,访···
- 2020-12-01 一级域名好还是二级域名好?
- 2020-10-13 百度抓取诊断工具一直抓取失败怎么办?
- 2019-12-09 域名解析后,网站返回状态码511应对方法
- 2020-04-10 百度下拉框怎么刷?刷百度下拉框软件原理及···
- 2019-08-12 网站出现“403,服务器上文件或目录拒绝···
- 2021-04-13 html/txt文件中文用浏览器打开有乱···
- 2020-09-03 element.style样式的修改
- 2021-01-06 百度移动端的搜索结果上线“踩顶”功能,对···
- 2019-11-06 正确打开.db数据库文件的两种方式,避免···
- 2020-10-20 UC神马搜索怎么做快速排名优化
- 2020-10-09 从网络SEO营销入手,看各大行业公司如何···
- 2020-01-16 为何seo外包们喜欢从零开始,做新站来优···
- 2021-01-18 进入无点击时代,做SEO,该怎么办?
- 2019-12-09 如果必须重新开始,你将采取什么步骤来学习···
- 2019-05-19 织梦CMS怎么设置网站地图自动更新?
- 2024-03-06 代理投的好,还需要招自己的优化师吗?
- 2021-03-09 百度商家口碑将停止运营并下线!ZT
- 2019-04-08 网站日志咋分析?
- 2020-01-08 页面内容被百度放进底层索引库,怎么起死回···
- 2021-02-02 做搜索优化需要长期更新,怎样避免页面主题···
- 2019-07-25 「百度站长平台投诉技巧」搜索资源平台反馈···
- 2020-04-07 排名总受百度算法影响,怎么应对频繁调整的···
- 热门标签
-
- Error 1016
- Origin DNS error
- 源DNS服务器错误
- element.style
- css
- .db文件
- 域名解析
- 别名解析
- CNME解析
- A记录
- 宝塔
- asp.net
- php
- jsp
- 开发语言对比
- 白名单
- 香港主机
- 主机白名单
- 301
- 301重定向
- 301永久重定向
- 个人备案
- 企业备案
- 网站备案
- 500错误
- 锚点跳转
- 字体大小
- 用户体验
- 虚拟主机
- 网站搭建
- 自适应网站
- web前端
- 移动端
- 响应式网站
- 网站被黑
- 后台入侵
- 源码安全
- 备案驳回
- 阿里云备案
- 阿里云服务器
- 实例类型
- ftp
- flashfxp
- js空链接
- 织梦cms
- 开源CMS
- 百度转码
- 禁止转码
- 伪元素选择器
- 伪类选择器
- CSS3
- 网站建设
- 低成本网站
- 域名备案
- win10连接远程服务器
- 谷歌插件
- Chrome
- 服务器流量
- 网站流量耗尽
- 蜘蛛
- 屏蔽蜘蛛
- 网站体验设计
- 老年用户
- 网站安全
- html标签
- seo标签
- X-Powered-By
- 服务器空间
- 网站空间选择
- 网站设计
- seo要点
- seo建站方案
- robots.txt
- 0收录
- 新域名收录
- 网站收录
- 独立ip主机
- seo服务器
- 网站标签
- 标签优化
- dede
- 分页样式代码
- pbootcms
- 权限设置
- javascript
- 编程语言
- 服务器稳定性
- 网站续费
- 营销型网站
- 定制网站
- filter
- 滤镜
- PbootCMS
- sqlite
- mysql
- 数据库
- SQL
- Sqlite
- css3