【前端学习】iconfont阿里字体使用

1.引用线上地址-阿里服务器保管（这是链接可以浏览器中打开）

可用浏览器打开（加上前缀http:）

得到

代码中使用：

注：更改图标的类名

更改后重新获取网页链接--重新引入链接--重新写类名

报错：没有显示的话，Chrome调试工具f12，看看右边有没有

下载下来的文件夹只需要把这几个放到项目中（同一层目录的哟，因为css这么引用的）

2.下载到电脑-引用本地地址

link的路径换一下（确保上面那几个文件在同一层哦）

other:自己设计图标库的网站是icomoon

它将svg图片转换为font字体

3.麻烦的引用方式

下面这些可以从这儿复制-->

.iconfont {

font-family: "iconfont" !important;

font-size: 16px;

font-style: normal;

-webkit-font-smoothing: antialiased;

-webkit-text-stroke-width: 0.2px;

-moz-osx-font-smoothing: grayscale;

}

【前端学习】iconfont阿里字体使用相关推荐

vue引入iconfont阿里字体图标库报错和解决
报错:引入阿里字体库后报错说找不到文件解决:在引入的字体iconfont.css中加入绝对路径内容:如图 @font-face {font-family: "iconfont" ...
在vscode中使用iconfont阿里字体图标
1.登录阿里巴巴矢量图标库 iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载.在线存储.格式转换等功能.阿里巴巴体验团队倾力打造,设计 ...
前端学习笔记：字体图标的下载网址
字体图标的下载 icomoon字库 http://icomoon.io 阿里iconfont字库 http://www.iconfont.cn/ 选择字体图标后下载压缩包,解压后把fonts这个文件夹 ...
前端学习之字体图标(iconfont)
Web字体字体格式不同的浏览器支持的字体格式是不一样的. tureTypeFont(.ttf)格式 . ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,支持这种字体的浏览器有I ...
三种方式在HTML使用阿里字体图标--iconfont阿里巴巴矢量图标库
好久没用到阿里巴巴的图标,突然要用到就发现不会用了,只会导出png格式的图标png了= = 目录 1.字体图标方法一.本地使用通过类名使用阿里矢量图标 1.把图标添加入库 2.把图标添加到项目 3. ...
【前端学习之HTMLCSS进阶篇】-- CSS第一篇 -- @规则与web字体图标
[前端学习之HTML&CSS进阶篇]- CSS第一篇 - @规则与web字体图标文章目录 [前端学习之HTML&CSS进阶篇]- CSS第一篇 - @规则与web字体图标前言一. ...
前端学习记录13-CSS-(滑动门技术，微信导航栏实现，淘宝轮播图实现，图标字体实现，过渡效果，获得焦点元素)
前端学习记录13-CSS-滑动门技术,微信导航栏实现,淘宝轮播图实现,图标字体实现,过渡效果,获得焦点元素滑动门技术微信导航栏实现静态轮播图实现网上引用的图标字体设置过渡效果(transit ...
【前端】CSS基础——字体Font（学习笔记）
W3C标准: 结构:HTML描述页面的结构表现:CSS控制页面中元素的样式行为:JavaScript相应用户操作相关笔记: HTML基础 CSS基本语法 CSS基础-layout CSS基础-f ...
iconfont 图标转为字体_阿里字体库iconfont使用方法
天兴工作室之前写过一篇"zblog使用Font Awesome图标字体教程",然后发现"Font Awesome"太臃肿了,一个主题根本用不了这么多图标,图标样 ...

【前端学习】iconfont阿里字体使用

【前端学习】iconfont阿里字体使用相关推荐

最新文章

热门文章