html中如何使用网络字体（iconfont的使用）

第一步：打开iconfont官网页面

第二步：找到你想要的图标，并加入购物车，点开右上角的购物车，并选择添加至项目（用github登录），并创建一个文件夹之后按照如图所示复制代码

第三步：在html的head标签里嵌入link标签，将第二步复制的代码填写到link的href属性中，并在前面加上http:

第四步：复制你所需图标的代码

第五步：使用图标时，给标签添加上class属性，属性值为iconfont+第四步复制的代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>iconfont</title><link rel="stylesheet" href="http://at.alicdn.com/t/font_2748930_yqyf38bg3ds.css"></head><body><div class="content"><span class="iconfont icon-wenjian">文件</span></div></body></html>

运行结果：

html中如何使用网络字体（iconfont的使用）相关推荐

html5 在线字体库,网络字体@font-face，如何处理网页中的特殊字体？
网络字体@font-face 如何处理网页中的特殊字体 HTML5学堂:随着网页的发展,网页中出现了越来越多的字体种类,网页自带的微软雅黑.宋体.黑体已经越来越难以满足设计的需要,那么,如何在网站中使 ...
html5字体在线代码,网络字体@font-face 如何处理网页中的特殊字体
HTML5学堂:随着网页的发展,网页中出现了越来越多的字体种类,网页自带的微软雅黑.宋体.黑体已经越来越难以满足设计的需要,那么,如何在网站中使用比较特殊的字体,又不会下载太大的字体文件,来装饰我们网 ...
微信小程序学习11：iconfont 网络字体图标使用（阿里巴巴）
微信小程序学习11:iconfont 网络字体图标使用(阿里巴巴) 使用方法 [1] 是直接下载图片,使用<image src="/static/images/v2.jpg" ...
设置Eclipse中的Courier New字体
第一步就是如何设置字体: 1. 首先打开Eclipse,然后再打开菜单中的"Window",在下拉菜单项中选择最后一个Preferences: 2. 在弹出的窗体中,选择第一个Ge ...
怎么让qt发声_第3部分：添加网络字体-让我们的单词发声
怎么让qt发声 This is a big week for the project. While it was an important step last week to establish so ...
css 中文文字字体_使用CSS的网络字体
css 中文文字字体 CSS | 网络字体 (CSS | Web fonts) Web fonts allow people to use fonts that are not pre-install ...
爬get接口_网络字体反爬之起点中文小说
前几天跟同事聊到最近在看什么小说,想起之前看过一篇文章说的是网络十大水文,就想把起点上的小说信息爬一下,搞点可视化数据看看.这段时间正在看爬虫框架-pyspider,觉得这种网站用框架还是很方便的,所 ...
在uniapp的小程序中使用自己的字体库
很多人下载字体库都是在阿里字体库找字体下载字体.但是我还是喜欢这个这个网站弄字体 1.假设我们找一个网站上面发现了不错的字体 1.1 我们打开控制台然后在网络中过滤woff,就找到了字体文件 1.2 ...
在项目中使用阿里巴巴矢量字体图标
在项目中使用阿里巴巴矢量字体图标打开阿⾥巴巴字体iconfont 搜索需要的图标,选择要使用的图标,点击添加入库点击右上角的购物车按钮,进入库中选择添加入项目, 选择新建项目,或者使用已有项目 ...

html中如何使用网络字体（iconfont的使用）

html中如何使用网络字体（iconfont的使用）相关推荐

最新文章

热门文章