保姆级css引入字体图标的三种方式——以阿里巴巴矢量图为例
  w3D4xj6A7aCK 2023年11月17日 21 0

阿里巴巴矢量图

一、Unicode和css引入的前期准备工作

1.进入阿里巴巴矢量图网站,将想引入的图标加入购物车。

保姆级css引入字体图标的三种方式——以阿里巴巴矢量图为例_ico

2.加入购物车成功后点击下载代码。

保姆级css引入字体图标的三种方式——以阿里巴巴矢量图为例_html_02

3.解压下载好的压缩包,并打开demo_index.html文件,复制其中的字体声明代码。

保姆级css引入字体图标的三种方式——以阿里巴巴矢量图为例_ico_03

4.把从阿里巴巴矢量图中复制好的字体声明复制到html里的css中。

保姆级css引入字体图标的三种方式——以阿里巴巴矢量图为例_css_04

5.在要引入字体图标的html文件夹中,建立一个fonts文件夹。

保姆级css引入字体图标的三种方式——以阿里巴巴矢量图为例_ico_05

6.将download解压包中的这5个文件复制进fonts文件夹中。

保姆级css引入字体图标的三种方式——以阿里巴巴矢量图为例_ico_06

二、Unicode引入

1.修改复制过来的字体声明中的路径。

保姆级css引入字体图标的三种方式——以阿里巴巴矢量图为例_ico_07

修改后:

保姆级css引入字体图标的三种方式——以阿里巴巴矢量图为例_html_08

2.打开download文件夹里的demo_index.html,选择Unicode中复制图标的代码。

保姆级css引入字体图标的三种方式——以阿里巴巴矢量图为例_css_09

3.将复制的图标代码粘贴到标签中。

4.在css中选择该标签,调用iconfonts属性。

保姆级css引入字体图标的三种方式——以阿里巴巴矢量图为例_ico_10

三、css引入

1.打开download文件夹里的demo_index.html,选择Font class,复制外链。

保姆级css引入字体图标的三种方式——以阿里巴巴矢量图为例_html_11

2.在html中粘贴css外链,并修改路径。

保姆级css引入字体图标的三种方式——以阿里巴巴矢量图为例_ico_12

保姆级css引入字体图标的三种方式——以阿里巴巴矢量图为例_html_13

3.在html中新建一个标签,用类选择器调用iconfont类,在粘贴复制好的字体图标代码,注意去掉前面的小点。

保姆级css引入字体图标的三种方式——以阿里巴巴矢量图为例_html_14

4.去掉小点后就已经引入成功,此时可以通过文字图标代码类来修改样式

保姆级css引入字体图标的三种方式——以阿里巴巴矢量图为例_ico_15

四、在线项目引入

不需要任何准备工作
1.找到想要的字体图标添加至项目

保姆级css引入字体图标的三种方式——以阿里巴巴矢量图为例_ico_16

2.可以新建一个项目

保姆级css引入字体图标的三种方式——以阿里巴巴矢量图为例_html_17

3.项目建成后会自动跳转到此页面,图标也会在里面,点击生成代码。

保姆级css引入字体图标的三种方式——以阿里巴巴矢量图为例_css_18

4.Unicode有一个,CSS有一个,后续方法与之前的一致。

保姆级css引入字体图标的三种方式——以阿里巴巴矢量图为例_html_19

5.用link标签引入复制的css外链,注意在路径中添加http:或https:协议

保姆级css引入字体图标的三种方式——以阿里巴巴矢量图为例_css_20

6.在html中新建一个标签,用类选择器调用iconfont类,在粘贴复制好的字体图标代码。可以通过文字图标代码类来修改样式

保姆级css引入字体图标的三种方式——以阿里巴巴矢量图为例_css_21

分享完毕,你学会了吗~~~不妥之处,敬请批评指正,谢谢大家!






【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月17日 0

暂无评论

推荐阅读
  wURKzOHw9Irf   2023年12月24日   26   0   0 HTMLicoicohtml
  8l4CZpTOKa7P   2023年12月26日   38   0   0 htmlhtml
  dwHry2iKGG0I   2023年12月26日   31   0   0 githubgithubhtmlhtml
w3D4xj6A7aCK