关于字体图标的三两事

介绍三种icon字体图标的方法

先选择想要使用的图标，加入购物车后添加到项目http://www.iconfont.cn/

Unicode方式

选择Unicode 生成并复制红框中的代码，然后在HTML中添加style，或者加入到CSS中，并将图标对应的Unicode码添加到相应的标签元素中，当然别忘了在CSS中添加字体font-family，字体名就是复制代码中的font-family。

Font Class方式

选择Font Class 然后选择编辑图标，在font class里面定义这个图标的名称，方便我们一会儿进行调用，然后复制代码。

将这段代码直接在HTML中link引用，因为这是一个网络css文件，然后在标签元素中定义class的值为刚刚我们修改过的图标名称即可。

font-awesome

我们先在BootCDN上找到font-awesome的css文件

将他复制下来

然后我们在http://fontawesome.dashgame.com/中找到我们想要使用的图标

在HTML中link的href里面填写从bootCDN复制的font-awesome的css路径，并在元素标签中按class="fa fa-图标名称"进行定义，即可得到图标

原文地址：https://www.cnblogs.com/evenyao/p/9261240.html

时间： 2024-07-30 14:05:17

关于字体图标的三两事的相关文章

“RFID 破解三两事”讨论总结

昨晚睡了一晚上的火车,刚到家,还没有洗脸,看看文章的访问量及评论都太多,radiowar在我文章评论及他的那篇评论文章里,提到菜鸟,小白,以及我的文章内容错误,误导大家等,看了这些,我觉得不得不站出来澄清一下,我在想如果文章内容错误,那么文章就必须要删除,所以我仔细的看了我的文章,仍然没有发现大的问题. 我仔细看了radiowar的那篇评论文章,主要还是考虑问题的方向不一样,或者说radiowar没有仔细看我想表达的意思,本来想直接回复,最后回复内容太多,所以就整理成一篇文章进行回应一下: 1:

iad 集成三两事

1. 好像是随着ios8的beta开始.  iad 已经发生了一些变化. 比如找不到enable iad network 的按钮了. 貌似是不需要手动去 enable 了. 只需要嵌入 iad framework 就可以了. 2. 如何测试iad是否集成好了呢?  自己测试请求操作 是否显示测试广告. 3. 目前的新上线了一个. 还没看到数据. iad workbench 那里也没有这个app激活. 不知道是什么状况. iad 集成三两事

Cetos7安装nginx三两事

Nginx安装 阿里云cetos7已经默认添加了nginx的yum源,可以通过yum search nginx确认. 如果没有,则可以通过运行rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm进行添加. 命令 123 systemctl start nginx.service # 启动nginx服务 systemctl stop nginx.serv

浅谈Docker三两事

Docker 到底是个什么东西呢?我们在理解 Docker 之前,首先得先区分清楚两个概念,容器和虚拟机.可能很多人都用过虚拟机,而对容器这个概念比较的陌生.我们用的传统虚拟机如 VMware , VisualBox 之类的需要模拟整台机器包括硬件.每台虚拟机都需要有自己的操作系统,虚拟机一旦被开启,预分配给它的资源将全部被占用.每一台虚拟机包括应用,必要的二进制和库,以及一个完整的用户操作系统.而容器技术是和我们的宿主机共享硬件资源及操作系统,可以实现资源的动态分配.容器包含应用和其所有的依赖

jQuery字体图标的三种方法

BootStrap框架原生图标 在导入BootStrap包的同时,导入bootstrap-3.3.7-dist/css/bootstrap.css层叠样式; <button type="button" class="btn btn-success glyphicon glyphicon-remove">编辑</button> Font Awesome图标的使用 在http://www.fontawesome.com.cn/网站上下载 ctrl

C++:MEMSET的大坑三两事

之前写了一题费用流,竟然硬是在写SPFA时为DIS数组赋初始值用了MEMSET数组QAQ 调试了很久也没有弄明白自己是卡在那里了,,,感觉被自己蠢哭了QWQ 错误的姿势!! #include <cstring> #include <iostream> #include <cstdio> using namespace std; const int INF = 0x3f3f3f; int dis[50005]; int main() { memset(dis,INF,si

nodejs之mock与跨域代理的三两事

emmm...好久没写博客了,都忘了该怎么开始. 那就先说下mockjs.因为一些原因,导致后台接口没有数据,那么我们就开始自己造数据,使用的是比较流行mockjs,根据文档就能简单的配置,然后开始愉快的玩耍了.(真香) 然后某天后台出数据了,又因为某些问题(跨域),导致我又没法愉快的玩耍,嗯,就是这样的,才有了今天这篇博客(口水话). 使用的是nodejs做跨域代理,非常简单,先贴代码: 1 var express = require('express'); 2 var router = ex

css字体图标的使用方法

提要:对于传统的一般用css雪碧(css sprite)来搞,目前大部分网站已经主要字体图标 ,利用font+css 或者font+html 来开发,今天总结了一下,记录之~ css sprite用背景图片定位,兼容性好,图标颜色丰富,但是对于网站缩放来讲,会使图片失真,也不容易维护:而当我们运用字体图标来做这个事的时候,好处就多多了(但是字体图标就是颜色单一,一般可忽略) 1.首先从https://icomoon.io/ 国外的字体图标库 非常好 下载免费的图标库(也可以自己添加要求添加SVG

css3总结(三)立方体、动画、web字体、字体图标、弹性布局、多列布局、伸缩盒子

目录: 1.立方体2.动画3.设置动画的一些属性4.案例:无缝滚动5.web字体6.弹性布局7.多列布局8.弹性布局9.案例:伸缩盒子的flex属性的应用案例(菜单个数不限)10.伸缩盒子的align-items属性     设置侧轴对齐方式11.案例:伸缩盒子,宽高自适应 1.立方体    *transform-style: preserve-3d;/*子元素保留其3d样式*/ <!DOCTYPE html> <html> <head> <title>立方