零基础学做网站培训介绍

当前位置:

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

具体代码如下:

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

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

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

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

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

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 有些学建网站学员在万网,阿里云买了国内空间,它安装wordpress的方法与香港免备案空间的方法不一样,导致很多同学不能正确的安装wordpress。下
  • 万网是国内空间最大供应商,它的特点是价格高,但稳定。对于做企业网站的学员来说,可以选择万网的空间。刚购买了万网的空间,会有以下几个文件夹,它
  • 在学做网站时,如果自己要建多个网站,可以考虑使用阿里云的服务器,在阿里云服务器中ECS使用较多。但对于没有linux编程经验的人来说配置阿里云ECS真
  • 我们在做网站时,网站里会有很多的小图标,通常这些小图标会使用小图片来制作,但修改起来比较麻烦。所以现在很多网站都使用字体图片来制作小图标。
  • 通常情况下,网站上的内容发布日期格式为“年-月-日”这种格式,但有些网站的时间格式却是“30分钟前”、“2天前”。怎么将正常的“年-月-日”格式自动转换成
  • dreamweaver是个可视化的软件,你直接选中你要更改的设置,在编辑器中直接就可以更改了。或是用CSS也可以设置你说的那些内容字体大小、颜色样式。dr
  • 由于WP开始自动调用谷哥字体,会导致自己做网站时打开后台很慢,我们只需要屏蔽谷歌字体。在之前我们讲到使用代码方式屏蔽谷歌字体,现在学做网站论坛
  • CSS网页布局中字体样式 图文教程 (111800 次浏览)
    在网页制作时,我们需要控制网页中字体的大小,颜色,粗细等,通过情况下,我们会使用以下的CSS样式去控制这个字体的样式:字体的大小:font-size
  • 网站favicon图标如何制作 图文教程 (110606 次浏览)
    在我们上网的时候,看到有许多网站,当打开它的时候,在浏览器中会出现它们网站的图标,特别的个性化。很多学做网站的学员也问过这样的问题,询问网站f
  • 说起网站图标favicon.ico,大家都想到的是制作一个固定小图片来显示【方法见:如何制作网站图标favicon.ico】,很少知道网站图标可以做成一个动态的。
  • 在使用WP程序做网站时,登录网站后台时,程序会自动调用程序的默认图标,对于不想让别人知道自己网站程序的学建站学员来说,就需要将这个图标替换成自