新年
快乐
当前位置:首页经验分享使用阿里Iconfont轻松获取矢量图标的方法

使用阿里Iconfont轻松获取矢量图标的方法

阿里Iconfont是阿里巴巴提供的一个矢量图标管理平台,通过该平台,用户可以方便地获取和管理各种矢量图标。下面将详细介绍如何使用阿里Iconfont来获取矢量图标。

NO:1 使用教程

NO:1 注册并登录 首先,打开阿里Iconfont官网(www.iconfont.cn 并进行注册或登录。)

NO:2 选择并添加图标 在官网上,你可以浏览数千个图标。建议选择多色图标,因为它们更具视觉效果。将鼠标悬停在感兴趣的图标上,会出现几个选项,在其中点击购物车图标,将该图标添加入库。如果有多个图标需要添加,则需要一个一个的进行操作。

NO:3 进入购物车 在页面右上角找到购物车图标,并点击进入。购物车中显示了你添加的所有图标,右侧会弹出一个窗口。

NO:4 创建项目 在弹出窗口中,点击”添加至项目”按钮,并点击右侧的加号新建一个项目。输入项目名称(可以是中文),然后点击确定。

NO:5 生成链接 现在你已经进入了项目界面,在页面中找到”Symbol”选项,并点击进入。如果图标还没有生成链接,会显示红色字体”暂无代码,点此生成”,点击该文字即可生成链接。

NO:6 将链接放入头文件

NO:2 最后

是将生成的链接放入头文件中。以网站的主题根目录中的header.php文件为例,你可以将图标链接header在第最后一行或其他合适的位置。

使用以上步骤,你可以轻松地通过阿里Iconfont获取并管理矢量图标。这个方法方便且流行,在许多设计项目中都被广泛应用。希望这篇文章能够帮助到那些对如何使用阿里Iconfont感到困惑的同学们!

格式为

<script src="刚刚生成的连接"></script>

已本站为例

<script src="//at.alicdn.com/t/font_2696731_fbdj49dums.js"></script>

NO:3 将下列css样式放入 style.css文件中

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

NO:4 使用时格式为

<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use></svg>

XXX为图标下方名称.

已本站为例(第一个图标店铺)格式为:

<svg class="icon" aria-hidden="true"><use xlink:href="#icon-dianpu"></use></svg>

使用阿里Iconfont轻松获取矢量图标的方法
版权声明
文章链接: https://dmyblog.cn/1288.html
文章标题: 使用阿里Iconfont轻松获取矢量图标的方法
声明: 本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,发布本站内容到任何网站。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理

给TA打赏
共{{data.count}}人
人已打赏
经验分享

css毛玻璃布局

2023-8-25 23:40:58

经验分享

1Panel+docker快速部署Blossom私有云笔记

2023-12-21 23:22:19

0 条回复 UP文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索