Iconfont的引用与在伪元素中的图标引用

在线引用

复制font class的在线链接

<link rel="stylesheet" href="http://at.alicdn.com/t/font_2171387_u0edhtw58g.css">

在link标签href中黏贴（前面需要加上***http：***）

复制你需要使用图标的代码
在HTML中

类名里整上刚刚复制的代码同时加上iconfont的一个多类名
在浏览器就显示

本地引用

下载本地后得到一个压缩包，解压后里面有这些文件

把这个文件夹可以命名为font，移动到案例目录下

在对css文件的引入

后续操作一样添加相应的类名和 iconfont这样的多类名就行

伪元素图标引用

以本地引用举例

在引入css文件后，在Unicode下复制图标的代码

在伪元素你必须加上

font-family: 'iconfont';

同时content里的属性值是刚刚复制Unicode代码
将***&#x***替换成******即可

ps：学习笔记个人心得
有什么更优的方法欢迎评论

Iconfont的引用与在伪元素中的图标引用相关推荐

伪元素中content的用法详解
content:""----->扩展伪元素中的content玩起来,还是有很多花里胡哨的东西,我们来看看它的一些用法吧,可能我们用的比较少,但是有时候用到的时候,简直舒服呀 ...
用css伪元素制作箭头图标
用css伪元素制作跳转箭头图标在一些前端框架中见到过伪元素做的图标,现在一般都自己写了,用伪元素可以代替不少图片 .yui-cell{ position: relative; } .yui-cell ...
伪元素使用——字体图标（以阿里巴巴矢量图标库为例）
1.在阿里巴巴矢量图标库中,找到你喜欢的字体图标,选择添加入库(即购物车图标) 2.点击在页面右上方的"购物车" 3.选择"添加到项目",(没有项目可以创建一个 ...
java的弱引用_深入理解Java中的弱引用
不久之前,我面试了一些求职Java高级开发工程师的应聘者.我常常会面试他们说,"你能给我介绍一些Java中得弱引用吗?",如果面试者这样说,"嗯,是不是垃圾回收有关的?& ...
cssbefore图片大小_我可以在CSS：before /：after伪元素中更改图像的高度吗？
由于我的其他答案显然没有被很好地理解,因此这是第二次尝试: 有两种方法可以回答这个问题. 实用(只给我看该死的照片!) 忘记:after伪选择器,然后去做类似的事情 .pdflink { min-he ...
在伪元素中如何使用字体图标
一.下载字体图标二.将下载的字体图标放到项目中三.在main.js中引入四.在css中的使用 &::after {content: '\e601';font-family: 'iconf ...
php 什么时候传引用,什么时候在PHP中使用传递引用？
以下内容不适用于对象,因为这里已经说明了.如果计划修改传递的值,则通过引用传递数组和标量值将只会节省内存,因为PHP使用了更改时复制(copy-on-change)策略.例如: # $array wi ...
python 引用局部变量_在Python中赋值之前引用的局部变量？
我正在使用PyQt库获取网页的屏幕截图,然后阅读不同URL的CSV文件. 我保留一个变量Feed,每次处理URL时都会增加,因此应该增加到URL的数量. 这是代码: webpage = QWebPag ...
了解css中伪元素 before和after的用法
层叠样式表(CSS)主要用于将样式应用于HTML标签,但是在某些情况下,向文档添加额外标签元素是多余的或不可能的,CSS中实际上有一个特性允许我们在不中断实际文档的情况下添加额外标签,即伪元素. 你听 ...

Iconfont的引用与在伪元素中的图标引用

在线引用

本地引用

伪元素图标引用

Iconfont的引用与在伪元素中的图标引用相关推荐

最新文章

热门文章