初步准备

引入方式分为三种：

unicode在线链接：

unicode本地链接：

font-class在线链接：

font-class本地引入方法:

symbol的在线链接引入：

symbol的本地引入：

初步准备

第一步：

第二步：

第三步：

引入方式分为三种：

unicode、font-class、symbol

unicode分为在线链接与本地链接：

unicode在线链接：

<!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>fontIcon</title><style>/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */@font-face {font-family: "iconfont"; /* Project id 3649984 */src: url("//at.alicdn.com/t/c/font_3649984_sym0ofmipq.woff2?t=1663227506310")format("woff2"),url("//at.alicdn.com/t/c/font_3649984_sym0ofmipq.woff?t=1663227506310")format("woff"),url("//at.alicdn.com/t/c/font_3649984_sym0ofmipq.ttf?t=1663227506310")format("truetype");}.iconfont{font-family: 'iconfont';font-size: 100px;color: red;}</style></head><body><span class="iconfont"></span></body>
</html>

unicode本地链接：

下载完成后，打开解压后的文件夹：

将字体文件放入需要使用图标的网页文件所在的目录中

将css文件中的内容copy到需要字体图标的文件的样式中

<!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>fontIcon</title><style>@font-face {font-family: "iconfont"; /* Project id 3649984 */src: url("iconfont.woff2?t=1663228358720") format("woff2"),url("iconfont.woff?t=1663228358720") format("woff"),url("iconfont.ttf?t=1663228358720") format("truetype");}.iconfont {font-family: "iconfont" !important;font-size: 50px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-xiaoqiche:before {content: "\e65e";}</style></head><body><span class="iconfont"></span></body>
</html>

font-class在线链接：

<!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>Document</title><link rel="stylesheet" href="//at.alicdn.com/t/c/font_3649984_sym0ofmipq.css"></head><body><span class="iconfont icon-xiaoqiche"></span></body>
</html>

font-class本地引入方法:

将红色框中的文字文件引入到目标文件夹

symbol的在线链接引入：

<!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>Document</title><script src="//at.alicdn.com/t/c/font_3649984_sym0ofmipq.js"></script><style type="text/css">.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style></head><body><svg class="icon" aria-hidden="true"><use xlink:href="#icon-xiaoqiche"></use></svg></body>
</html>

symbol的本地引入：

将下载后的文件夹中的js文件引入

style和body里面的内容与symbol的在线引入的内容是一致的

<!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>Document</title><script src="./iconfont.js"></script><style type="text/css">.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style></head><body><svg class="icon" aria-hidden="true"><use xlink:href="#icon-xiaoqiche"></use></svg></body>
</html>

如何引入iconfont字体图片和网页标题logo相关推荐

微信小程序离线引入 iconfont 字体图标
由于微信小程序的限制问题,我们不会像 Web 项目那样引入阿里的字体图标库,通常采用在线生成链接的方式引入. 但阿里矢量图库在 2022年 6-7月份进行了网站维护,维护之后,不能"生成在 ...
vue中在线引入iconfont字体图标
记录在线引入iconfont字体图标. 在iconfont官网上添加项目并添加完需要的图标后,在资源管理==>我的项目中生成代码,再到vue项目中app.vue组件里的style标签下引用即可. ...
微信小程序引入iconfont字体图标（阿里巴巴矢量图标库）
微信小程序怎么引入iconfont字体图标由于微信小程序线上的资源限制了各种接口安全域名,所以在小程序里如果想使用iconfont字体图标就会稍有不同,其实只需要把平时的iconfont字体图标远 ...
网页引入谷歌字体_在网页中使用Google字体
网页引入谷歌字体 Google Fonts is a service provided for free by Google that allows access to thousands of fo ...
把iconfront的资源放cdn访问_详解mpvue小程序中怎么引入iconfont字体图标
前言 iconfont阿里巴巴矢量图标库是我很喜欢的一个网站,可以下载/在线编辑/上传自己需要的矢量图标,也支持团队协作,那么在mpvue项目中如何引入呢? 将图标加入购物车搜索关键词可以是中文也可 ...
nebular 引入iconfont 字体图标，图标渲染成了框框
问题描述 angular 项目,需要引入字体图标,在项目初始化的时候注册了字体,如下: this.iconLibrary.registerFontPack('iconfont', { iconClas ...
手把手教你引入iconfont字体图标（方法二）
二 font class 打开iconfont网站:iconfont-阿里巴巴矢量图标库挑选想要的图标,加入购物车: 全部挑选完后,点击购物车: 将购物车中的图标加入到项目中: 将其添加至项目后,点 ...
小程序引入iconfont字体图标
1.挑选图标,加入项目 2.进入项目,下载到本地 3.解压文件后,复制iconfont.css放到小程序项目里,并重命名,修改为iconfont.wxss.并在app.wxss内引入该样式. @imp ...
uni-app引入iconfont字体成功后显示黑白色？怎么让其保留原本色彩，已解决！
如下图,字体引入成功后就是黑白色的,想让其保留原本的色彩 2022年阿里巴巴矢量图标库更新后,现在已经可以实现引用彩色图标了,引用方法和之前一样只需要在项目设置里,将字体格式的彩色勾上即可

如何引入iconfont字体图片和网页标题logo

初步准备

引入方式分为三种：

unicode在线链接：

unicode本地链接：

font-class在线链接：

font-class本地引入方法:

symbol的在线链接引入：

symbol的本地引入：

如何引入iconfont字体图片和网页标题logo相关推荐

最新文章

热门文章