iconfont 图标转为字体_阿里巴巴Iconfont矢量图转为字体图标的方法

我们在做网站时，网站里会有很多的小图标，通常这些小图标会使用小图片来制作，但修改起来比较麻烦。所以现在很多网站都使用字体图片来制作小图标。

今天学做网站论坛介绍一下阿里巴巴Iconfont矢量图转为字体图标并使用到网站上的方法。

step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过;

step 2:找到图标管理->我的项目->然后新建项目:

右边点击新建项目,用于保存自己常用的图标;

step 3:项目新建完成后,往项目里添加我们要想使用的图标,找到图标库,搜索一个想要的图标,然后添加到购物车(后直接添加至新建项目);

我现在将第一个安卓图标加入我的项目,点击加入购物车

step 4:添加到购物车完成后,购物车徽章数字应该显示1了,点击右上角的购物车图标,选择添加至项目,选择我们刚刚创建的项目,确定;

自动跳转到对应的项目里了,如图:

step 5:接下来一部比较关键,将打包好的字体文件下载到本地添加到你的项目中,在项目中引用文件中的iconfont.css文件;

下载下来解压后的文件如下:

强调一次,把上面这些文件都放在一个文件夹内，然后放在你的项目目录中,再在你的项目中引入iconfont.css文件

step 6:到了最后一步了,如何在项目中使用字体图标呢,其实很简单,创建一个i标签或者span标签,添加两个类名,一个固定的是iconfont,另一个是你想要的那个图标对应的类名:

具体代码如下:

好了,刷新页面,图标是不是出来了呢?

Ok,到这一步,恭喜你成功了,是不是很简单,不简单?那就从头再看一遍;

调节字体图标的大小是通过元素的font-size属性来控制的;

iconfont 图标转为字体_阿里巴巴Iconfont矢量图转为字体图标的方法相关推荐

android ui设计最新字体,ui用什么字体_安卓ui设计用什么字体
1 ui用什么字体 UI中字体使用的关键因素. 1.可读性. ui用什么字体_安卓ui设计用什么字体,可读性是UI中字体所需考虑的首要因素.字母字形必须清晰可辨,作为UI元素,其中不同的字母必须可以被 ...
iconfont 图标宽高出问题_阿里巴巴Iconfont加入部分图标后导致所有图标高度拉升问题...
现在是移动互联网时代,而随着这个时代的到来网页设计也偏向于扁平化,对于很多网页使用的图标都不再像以前那样使用一些写实的图标了,而都是使用一些扁平化的图标了.当前,不管是在PC端还是在移动端,很多ico ...
php矢量图图标,矢量图（字体图标）
矢量图(即放大不失真) 1.font awesome: 优点:相对比较简单,查看官网看例子基本上都会用 (http://www.bootcss.com/p/font-awesome/) 缺点:文件较大 ...
arial unicode ms字体_适合海报设计的最佳字体
字体有各种形状和大小,但当涉及到海报设计时,有一些特定类型的字体可以帮助你做出粗体声明并吸引注意力. 一些最好的海报字体,你可以使用它们来创建完美的海报设计. 海报设计很难一概而论. 有太多类型的海 ...
android 更改字体_如何在Android中更改字体
android 更改字体 Ben Stockton 本·斯托克顿 Android offers plenty of options to customize the appearance of you ...
android博客导航总结，以及个人常用android免费学习干货（文章，视频，矢量图，字体等）资源分享？
android博客导航总结与资源分享 1.博客总结 1.mob平台的使用 2.QMUI部分功能实现 3.XUI部分功能实现 4.其他功能 5.Flutter博客总结: 2.资源分享 1.文章类型资源分 ...
c++ 获取窗体默认字体_告别瞎眼，让Windows字体显示不逊苹果电脑
macOS上的字体显示效果非常舒服细腻,与之相比,Windows系统的字体显示效果就有些粗糙(最直观的感受就是锯齿超多). Windows 系统上糟糕的字体显示体验主要是因为两个原因:1.默认字体&q ...
原字体_在包装上玩转字体
包装设计师在设计包装时会用什么字体?设计中文字体本就具有一定的复杂性,往往设计师会从现有字库中选择.但有很多包装设计师会让字体担当品牌的"形象大使",通过一套具有标志性的字体来打造 ...
前端电子表数字字体_爬虫：如何优雅应对字体反爬
目录 THE BEGIN 一什么是字体反爬二如何解密 1.人工解密 2.工具解密三建立映射关系四解密 THE BEGIN 网页数据爬取可以简单分为三步:抓取页面,分析页面,存储数据.其中 ...

iconfont 图标转为字体_阿里巴巴Iconfont矢量图转为字体图标的方法

iconfont 图标转为字体_阿里巴巴Iconfont矢量图转为字体图标的方法相关推荐

最新文章

热门文章