<span class="icon iconfont"></span><div class="name">巴黎</div> 即  代表巴黎这个图标，于是构建如下样式代码：// css 样式，用于引入字体文件: @font-face { font-family: "iconfont"; src: url('./font/iconfont.eot?t=1583671571755'); /* IE9 */ src: url(...
1 首先在iconfont图标库中找到需要的图标，点击购物车图标“添加入库”。2 打开购物车，点击下方“添加至项目”按钮，如果没有项目，就新建一个。3 在我的项目页，可以看到3种引入方式，以及图标的名称。4 切换到Font class方式，点击“查看在线链接”，生成以下代码并复制：5 打开你的网页代码，添加link标签，将上...
一、Unicode引用 二、font-class引用 三、symbol引用 Unicode引用 兼容性最好,支持IE6+。 支持font-size、font-color等字体的样式去修改大小和颜色等。 不支持多色图标,就算项目中引入多色图标也会自动转为单色图标(默认灰色) ps:如果后面突然又想要加图标了,没关系我们只用在线更新@fant-face{}内的css即可。有...
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书写不...
什么是 font class 呢?其实用过 ant design 的 Icon 组件差不多就了解了。就是一个 <i> 标签,写上 className,这个 <i> 标签会渲染出图标。并且图标的大小与容器的字体大小相关联,而且可以为图标添加样式 className。 其实,在 ant design 中也有提到如何使用 iconfont 的图标。
因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。 不过因为本质上还是使用的字体,所以多色图标还是不支持的。 使用步骤如下: 第一步:拷贝项目下面生成的fontclass代码: //at.alicdn.com/t/font_8d5l8fzk5b87iudi.css ...
第一步:引入项目下面生成的fontclass代码: 代码语言:javascript 复制 <link rel="stylesheet"type="text/css"href="./iconfont.css"> 第二步:挑选相应图标并获取类名,应用于页面: 代码语言:javascript 复制 <iclass="iconfont icon-xxx"></i> (3)symbol引用 ...
1.使用 FontClass(最简单方式,支持字体样式定义但不支持多色字体) fontClass 支持字体的样式定义,但不支持多色字体,兼容性良好,当要替换图标时,只需要修改 class 里面的 Unicode 引用。只需要 html 和 csss。 第一步:引入项目下面生成的 fontclass 代码: ...
font-class 引用 第一步:引入项目下面生成的 fontclass 代码: <linkrel="stylesheet"href="./iconfont.css"> 第二步:挑选相应图标并获取类名,应用于页面: <spanclass="iconfont icon-xxx"></span>点击 font class 后每个图标下面都会显示对应的class,直接替换上面的 ...
unicode模式下的在线链接指的是font-face代码。 在vue中,将项目生成的font-face代码和自定义的iconfont样式写在App.vue的style中,就可以在项目中引用图标了。此时样式是全局作用的,如果想要实现图标不同的样式,可以增加一层自定义样式。 <i class="iconfont myIconStyle"> </i> ...