php学多久可以做网站,godaddy中文网站开发,视频推广方案,免费制作微信小程序软件iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库#xff0c;提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造#xff0c;设计和前端开发的便捷工具https://www.iconfont.cn/ 今天来介绍一下阿里巴巴矢量图标库的使用…iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造设计和前端开发的便捷工具https://www.iconfont.cn/ 今天来介绍一下阿里巴巴矢量图标库的使用
在使用前需要先登录这里可以使用微信、Github、新浪等方式登录这个自行选择即可 方法一直接下载图片
在我们搜索想要的图标后【这里以关键词 “下载” 为例】就会看到以下页面 在这个页面只要把鼠标移动到想要的图标后就会出现 “下载” 的选项点击即可
接下来就会看到下面这个弹窗页面 在这里可以选择颜色、大小等【注意若一开始是彩色图标在这里选择一种颜色后图标会变成单色图标】
一般下载 PNG 格式即可下载
这种方式是对单一图标下载也可以先将想要的图标加入购物车然后再批量下载 下载后就会得到一个压缩包解压即可获取全部图标图片文件了 方法二添加至项目【推荐】
在上一个方法中批量下载的上面有一个添加至项目的按钮点击即可 若没有项目则添加项目即可
这样方便对图标文件进行统一的集中管理
添加后就会自动跳转至项目图标管理的页面 左侧就是所有的项目中间就是项目中的所有图标了 添加到项目后如何使用这些图标呢
选择 “Font Class”然后点击生成代码 此时可以得到一个链接 接着在 HTML 文件中以外部文件的形式添加这个 css 样式文件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0!-- 导入阿里巴巴图标库图标 --link relstylesheet hrefhttp://at.alicdn.com/t/c/font_4351872_3552ir4aslo.csstitleDocument/title
/head
body/body
/html
注意需要在链接前面添加 “http://”
然后把鼠标移动到需要使用的图标上点击“复制代码” 接着在 HTML 文件中使用
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0!-- 导入阿里巴巴图标库图标 --link relstylesheet hrefhttp://at.alicdn.com/t/c/font_4351872_3552ir4aslo.csstitleDocument/titlestyle/style
/head
body!-- 图标在这 --span classiconfont icon-xiazai/span/body
/html
给 i 标签的 class 属性添加值“iconfont” 以及对应图标的代码 “icon-xiazai”注意两者之间需要空格隔开
这样就可以在网页中看到图标了 使用这种方式的好处
1、方便管理
2、不需要有大量图标文件占用内存 当然也可以使用 Unicode、Symbol 等方式这个跟 FontClass 类似了就不介绍了 一 叶 知 秋奥 妙 玄 心
