第一种:Unicode 1.第一步要把下载好的font_***文件夹放在和你项目的同一目录下面. 2.第二步去到阿里的iconfont 里面点击复制代码粘贴到你的项目去,第一次点开会显示(暂无代码,点击生成),点击生成即可出现代码。 3.第三步点击阿里iconfont 的 Font class ,复制font class的代码下来,用link 链接增加到项目里面...
font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width:0.2px; -moz-osx-font-smoothing: grayscale;} 第三步:挑选相应图标并获取字体编码,应用于页面 <iclass="iconfont">3</i> font-class引用 font-class是unicode使用方式的一种变种,主要是解决unicode书写不...
第一步:引入项目下面生成的 fontclass 代码 代码语言:javascript 复制 <link rel="stylesheet"href="https://blog.wenwuhulian.com/zb_users/theme/cardslee/ico/iconfont.css"> 第二步:挑选相应图标并获取类名,应用于页面: 代码语言:javascript 复制 <spanclass="iconfont icon-xxx"></span>...
svg 图标无法很方便的定义颜色,大小。 svg 图标从设计那边拿到之后需要使用 svgo 进行处理。 后来有小伙伴提出使用 iconfont 来保存图标,再使用 font class 来使用图标。结果……真香。 什么是 font class 呢?其实用过 ant design 的 Icon 组件差不多就了解了。就是一个 <i> 标签,写上 className,这个 <i> ...
1.使用 FontClass(最简单方式,支持字体样式定义但不支持多色字体) fontClass 支持字体的样式定义,但不支持多色字体,兼容性良好,当要替换图标时,只需要修改 class 里面的 Unicode 引用。只需要 html 和 csss。 第一步:引入项目下面生成的 fontclass 代码: ...
1 首先在iconfont图标库中找到需要的图标，点击购物车图标“添加入库”。2 打开购物车，点击下方“添加至项目”按钮，如果没有项目，就新建一个。3 在我的项目页，可以看到3种引入方式，以及图标的名称。4 切换到Font class方式，点击“查看在线链接”，生成以下代码并复制：5 打开你的网页代码，添加link标签，将...
如官方文档所说,font-class是为了让程序更加直观可读,直接用unicode会造成阅读困难。font-class模式关键在于生成的css文件。 本地引入 按照下图选择文件放入自己的项目中,vue中建议在assets文件夹下新建一个iconfont文件夹,放相关文件。 常用的就是:iconfont.css、iconfont.ttf、iconfont.woff、iconfont.woff2 ...
font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。 与unicode使用方式相比,具有如下特点: 兼容性良好,支持ie8+,及所有现代浏览器。 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引...
font-class引用 兼容性良好,支持ie8+,及所有现代浏览器。 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
step 5:到了最后一步了,如何在项目中使用字体图标呢,其实很简单,创建一个i标签或者span标签,添加两个类名,一个固定的是iconfont,另一个是你想要的那个图标对应的类名: 例如<i class='iconfont icon-HOMEMESSAGE'></i>