小白的iconfont图标的使用方法和一些个人心得

首先你要找到一个合适的矢量图片库(推荐以下:阿里的iconfont矢量图库---[官方网址:点击打开链接http://www.iconfont.cn/ 找到需要的icon])

1. 第一次登陆没有账号的先注册,然后找到你需要的图标,鼠标放在上面会有这样的变化:

--------它的功能有:1.购物  2.收藏  3.下载  ______( 这里的不多作解释了,按照个人需求来选择) 

2.这里的我们要说的方法是加购物车,然后打包下载zip压缩包;

3.选择好图标并且右上角的购物车栏内确认是否是自己需要的东西,不需要可以删掉,不够可以在增加:

如图所示:

4. 下载好自后,如何使用呢? 我也百度了看了以下方式,我知道的有很多人都写过,但是博主自己实验的为稳妥的方式:是下载下来自己使用的时候方便又快捷,(网上也有在线代码的教程)

5. 解压下载好的zip 发现这里的文件夹名字不是iconfont  那就要改一下 ,语义化的东西都比较用知道,防止自己回头在看的时候自己都不认识这是个啥…………所以最好改一下文件名字


这是unicode的方法使用就是如此简单:

第二种的fontClass 的方法 是在标签内 class名内写下这个class类名字:看图:

第三种:symbol 方式:可以参考:http://blog.csdn.net/athonyhaha/article/details/78814005 

三种中用的最多的是unicode 但是未来用的最多的是symbol 的方式,

unicode 和fontclass symbol 都是通过 font-size 控制大小,color调整颜色

在线引用url的时候可以在网站给的代码前面加上http


我想应该没有不会使用的吧,希望帮助到更多的人……


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
使用 iconfont Logo 图标库,并实现点击图标改变颜色的效果,你可以按照以下步骤进行操作: 1. 在 iconfont 网站上选择你需要的 Logo 图标,并将其添加到购物车。 2. 在购物车中下载图标库文件,其中通常包含了一个 CSS 文件和一个字体文件。 3. 将下载的 CSS 文件和字体文件引入到你的 HTML 文件中。 HTML: ```html <link rel="stylesheet" href="path/to/iconfont.css"> ``` 4. 在 HTML 文件中插入相应的图标。 HTML: ```html <i id="my-icon" class="iconfont icon-logo"></i> ``` 5. 使用 CSS 设置图标的初始颜色和点击后的颜色。 CSS: ```css .icon { color: #000; /* 设置初始颜色 */ cursor: pointer; /* 添加手型光标以表示可点击 */ } .clicked { color: #f00; /* 设置点击后的颜色 */ } ``` 6. 使用 JavaScript 添加点击事件监听器,并在点击时改变图标的颜色。 JavaScript: ```javascript const icon = document.getElementById('my-icon'); icon.addEventListener('click', function() { icon.classList.toggle('clicked'); }); ``` 确保将 "path/to/iconfont.css" 替换为你实际下载的 CSS 文件的路径。同时,根据你的需求修改图标的类名、颜色和样式。 这样,当你点击图标时,它会切换到 clicked 类,从而改变图标的颜色为点击后的颜色。 请注意,具体的类名、颜色和样式可能根据你使用iconfont Logo 图标库而有所不同,你需要参考该图标库的文档或示例来确定正确的类名和样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

匠造一知识

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值