tp安卓版下载|icon阿里巴巴图标

iconfont-阿里巴巴矢量图标库

iconfont-阿里巴巴矢量图标库

引入阿里iconfont图标方法以及注意事项 - 知乎

引入阿里iconfont图标方法以及注意事项 - 知乎切换模式写文章登录/注册引入阿里iconfont图标方法以及注意事项tuonioooo​计算机技术与软件专业技术资格证持证人背景在我们做日常项目时，通常会用到icon图标或者是一些图标字体，阿里iconfont是我们选择的较多的一种，下面我将会介绍使用方法和几种常用的引用方式iconfont新建项目官网：https://www.iconfont.cn/ 在首页选择【图标管理】-【我的项目】点击 【我的项目】填写项目信息，即可完成新建一个项目。【FontClass/Symbol 前缀】和【Font Family】参数是自定义的，以后会与我们生成的代码相关联，默认即可。添加图标新建好项目后，找到自己想要的图标，加入购物车。点击页面右上角的购物车图标，打开自己的购物车，选择添加至项目，我们就可以在自己的项目下看到添加的图标了。在我们的项目下，可以对图标进行编辑，如：大小、颜色、填充色，旋转等操作。Vue工程中引入iconfont官方文档：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code根据官方文档，有unicode引用、font-class引用、symbol引用三种引入方式，这三种方式又分有两种情况：下载到本地引入，在线链接引入。在Iconfont网页我们自己的项目下可以看到这些方式选择。unicode引用 不推荐本地引入unicode方式代码量少，并不需要下载本地文件。链接引入unicode模式下的在线链接指的是font-face代码。在vue中，将项目生成的font-face代码和自定义的iconfont样式写在App.vue的style中，就可以在项目中引用图标了。此时样式是全局作用的，如果想要实现图标不同的样式，可以增加一层自定义样式。在”myIconStyle”样式中修改color等属性可以覆盖全局的样式，实现单个的样式修改。这里注意理解下，官方文档说的“不支持多色”，是指我们iconfont网页项目中，就算有多色图标，引用的时候会自动去色，统一变成默认的颜色，不管你给图标一编辑了红色图标二编辑了黄色，在项目中用unicode方式引用的时候都会变成默认颜色，但是我们仍然可以通过修改css样式实现图标颜色自定义，只是这个颜色编辑放在代码层面来了。font-class引用 推荐使用如官方文档所说，font-class是为了让程序更加直观可读，直接用unicode会造成阅读困难。font-class模式关键在于生成的css文件。本地引入按照下图选择文件放入自己的项目中，vue中建议在assets文件夹下新建一个iconfont文件夹，放相关文件。常用的就是：iconfont.css、iconfont.ttf、iconfont.woff、iconfont.woff2@font-face {

font-family: "iconfont"; /* Project id 2974228 */

src: url('iconfont.woff2?t=1640340931514') format('woff2'),

url('iconfont.woff?t=1640340931514') format('woff'),

url('iconfont.ttf?t=1640340931514') format('truetype');

}再就是引入时，需要注意的是字体文件路径引用是否准确，否则打包可能不识别然后在main.js中引入iconfont.css文件，就可以正常使用了。import './assets/iconfont/iconfont.css'链接引入方式一：在index.html头部中，引入css文件即可方式二：点开css代码链接复制css代码，在项目中粘贴到iconfont.css文件中 ，在App.vue或main.js中引入import './assets/iconfont/iconfont.css'注意：iconfont.css中url 官方默认是cdn 链接, 打包时请改成http否则不识别@font-face {

font-family: "iconfont"; /* Project id 2974228 */

src: url('//at.alicdn.com/t/font_2974228_90efgxrmkr8.woff2?t=1639986814919') format('woff2'),

url('//at.alicdn.com/t/font_2974228_90efgxrmkr8.woff?t=1639986814919') format('woff'),

url('//at.alicdn.com/t/font_2974228_90efgxrmkr8.ttf?t=1639986814919') format('truetype');

}打包后@font-face {

font-family: "iconfont"; /* Project id 2400747 */

src: url('http://at.alicdn.com/t/font_2400747_k5sq86ts4b.woff2?t=1634895844844') format('woff2'),

url('http://at.alicdn.com/t/font_2400747_k5sq86ts4b.woff?t=1634895844844') format('woff'),

url('http://at.alicdn.com/t/font_2400747_k5sq86ts4b.ttf?t=1634895844844') format('truetype');

}symbol引用 不推荐本地引入将下载好的iconfont.js文件放入自己的工程目录，在main.js中引入，在App.vue中写好通用css代码，即可使用。import './assets/iconfont/iconfont.js'这里注意一点，下载下来的js文件是压缩过的，如果项目使用了eslint语法校验会疯狂报错，可以在js文件开头加入 /* eslint-disable */来指定该文件不应用eslint校验。链接引入在index.html头部中，引入js文件即可uni-app 引入iconfont图标基本上引入方式跟上Vue相同，但是会遇到打包时图标引入不显示的问题，解决方式如下：1.在iconfont.css中，需要使*~@* 将路径添加完整@font-face {

font-family: "iconfont"; /* Project id 2642111 */

src: url('~@/static/fonts/iconfont.woff2?t=1625021641165') format('woff2'),

url('~@/static/fonts/iconfont.woff?t=1625021641165') format('woff'),

url('~@/static/fonts/iconfont.ttf?t=1625021641165') format('truetype');

}2.在App.vue全局引入iconfont.css3.使用图标，在标签内的class通过"iconfont icon-"添加下载好的图标即可或通过官方uni-icons 引入自定义图标

总结 symbol引用最受官方推荐，也是最优的方式，但是浏览器兼容不好，目前来看，前端需要兼容一些低版本的浏览器，所以如果考虑到用户使用，不建议采用symbol引用。 unicode引用浏览器兼容最好，但是可读性差，font-class引用虽然兼容性比unicode引用差一点，但是提高可读性，综合来看，目前项目中还是采用font-class引用比较好。 因为引用网络资源的不稳定，所以建议采用本地引入的方式。 如果在图标库中新增加了图标，则需要更新在线链接并把该链接重新引入到实际项目中，或者重新下载代码到本地，然后在实际项目中引入最新的iconfont文件。 再就是引入时文件路径的问题，打包都需要注意。点击下方卡片/微信搜索，关注公众号“天宇文创意乐派”(ID:gh_cc865e4c536b)听说点赞和关注本号的都找到漂亮的小姐姐了哟且年后必入百万呀！！往期推荐分享6个实用的网站，非常Nice利用Vue 脚手架 开发chrome 插件，太方便了！Vue类似hooks的新库VueUse使用NodeJs和JavaScript开发微信公众号再见 Swagger UI！国人开源了一款超好用的 API 文档生成框架，Star 4.7K+，真香！！JavaScript 细节和一些实际应用，了解一下本文使用 文章同步助手 同步编辑于 2021-12-27 22:54图标Icon Font阿里软件​赞同 4​​添加评论​分享​喜欢​收藏​申请

阿里巴巴iconfont怎么是正确的使用方式？ - 知乎

阿里巴巴iconfont怎么是正确的使用方式？ - 知乎首页知乎知学堂发现等你来答​切换模式登录/注册前端开发图标Icon Font阿里巴巴iconfont怎么是正确的使用方式？自己画的svg想用font的类型引入到网页中，是不是要用iconfont上传生成代码，然后使用？求大神解答关注者383被浏览437,401关注问题​写回答​邀请回答​好问题 1​1 条评论​分享​26 个回答默认排序班星灿最美不过飞机稿​ 关注图标的制作和上传可以参照官网给出的文档：Page 1图标的下载和使用官网上说的不是很清楚，简单介绍下：1.首先在Iconfont-阿里巴巴矢量图标库上面将你需要的图标点击购物车按钮加入“暂存架”2.选择完所有要用的图标后“存储为项目”，给它命名。然后在“图标管理”-“图标应用项目”中找到这个项目，获取在线链接，把里面的代码复制到CSS中。3.在HTML中需要使用到图标时，使用iconfont类名。

里面写上你想用的图标下面的Unicode：4.然后你可以通过控制iconfont类的属性改变图标的样式，比如：.iconfont{

font-family:"iconfont";

font-size:16px;

font-style:normal;

-webkit-font-smoothing: antialiased;

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

-moz-osx-font-smoothing: grayscale;

padding-left:20px

}

就可以在页面中引用和修改了。官网中还列出了使用时候的兼容性问题及其解决方法：Page 2这些图标也可以下载到本地使用。图标都加入暂存架后选择“下载到本地”，会得到以下几个文件：浏览器打开demo.html可以看到每个图标的Unicode，把iconfont.css里的代码复制到css里面，把下面四个文件放到css可以引用到的文件夹里就可以了。下载使用的一个缺点是添加图标的话要重新把所有图标再下载一遍覆盖原来的文件，如果是在线链接只要重新生成一次链接就好了。编辑于 2015-11-12 18:33​赞同 146​​27 条评论​分享​收藏​喜欢收起​知乎用户自从有了阿里巴巴字体图标库 设计小伙儿都变懒了发布于 2016-06-28 14:07​赞同 49​​3 条评论​分享​收藏​喜欢

阿里巴巴icon front-symbol引用（笔记） - 知乎

阿里巴巴icon front-symbol引用（笔记） - 知乎首发于编程路上第一百零一个问题切换模式写文章登录/注册阿里巴巴icon front-symbol引用（笔记）国家一级保护废物一个爱好创造的宅。转自symbol引用这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点：支持多色图标了，不再受单色限制。通过一些技巧，支持像字体那样，通过font-size,color来调整样式。兼容性较差，支持 ie9+,及现代浏览器。浏览器渲染svg的性能一般，还不如png。使用步骤如下：第一步：拷贝项目下面生成的symbol代码：//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js第二步：加入通用css代码（引入一次就行）：

第三步：挑选相应图标并获取类名，应用于页面：

转自SVGSVG 意为可缩放矢量图形（Scalable Vector Graphics）。SVG 是使用 XML 来描述二维图形和绘图程序的语言。与其他图像格式相比，使用 SVG 的优势在于：SVG 可被非常多的工具读取和修改（比如记事本）SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。SVG 是可伸缩的SVG 图像可在任何的分辨率下被高质量地打印SVG 可在图像质量不下降的情况下被放大SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）SVG 可以与 Java 技术一起运行SVG 是开放的标准SVG 文件是纯粹的 XMLHTML 页面中的 SVGSVG 文件可通过以下标签嵌入 HTML 文档：、