Bootstrap 字体图标和自定义矢量图标

一、Bootstrap 字体图标

Bootstrap包括250多个来自 Glyphicon Halflings 的字体图标。

使用：将图标类应用到这个 <span> 或者<i>标签上

注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。

           <button type="button" class="btn btn-default">查询<span class="glyphicon glyphicon-search"></span></button><button type="button" class="btn btn-default">删除<i class="glyphicon glyphicon-remove"></i></button>

可以对图标修改颜色和大小样式：

            <button type="button" class="btn btn-default">查询<span class="glyphicon glyphicon-search" style="color: red; font-size: 20px;"></span></button><button type="button" class="btn btn-default" style="font-size: 20px;">删除<i class="glyphicon glyphicon-remove" style="color: #4cae4c;"></i></button>

二、自定义icon图标库阿里图标库：https://www.iconfont.cn/

选择要使用的矢量图标，加入购物车，添加到项目，然后下载到本地解压。

demo_index.html 里面有三种使用方式，选择使用一种，按步骤引用即可。

1) 2）3）

1、font-class 引用

第一步：引入 fontclass.css ：

    <link rel="stylesheet" href="./font/iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：

            <button type="button" class="btn btn-default">查询<span class="iconfont icon-ren"></span></button>

2、Symbol 引用

第一步：引入iconfont.js

<script src="./font/iconfont.js"></script>

第二步：加入通用 CSS 代码（引入一次就行）

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

第三步：挑选相应图标并获取类名，应用于页面

            <button type="button" class="btn btn-default">PDF<svg class="icon" aria-hidden="true"><use xlink:href="#icon-PDF"></use></svg></button>

3、Unicode 引用

第一步：在自己的 index.css 中放入样式，注意路径

@font-face {font-family: 'iconfont';src: url('../font/iconfont.eot');src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),url('../font/iconfont.woff2') format('woff2'),url('../font/iconfont.woff') format('woff'),url('../font/iconfont.ttf') format('truetype'),url('../font/iconfont.svg#iconfont') format('svg');
}
.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

第二步：挑选相应图标并获取类名，应用于页面

        <button type="button" class="btn btn-default">查询<span class="iconfont">&#xe86a;</span></button>

Bootstrap 字体图标和自定义矢量图标相关推荐

font-face字体图标和inconfont矢量图标库
font-face字体图标 font-face是css3中的一个模块,他主要是把自己定义的web字体嵌入到你的网页中. 好处: 1.可以非常方便的改变大小和颜色 2.放大后不会失真 3.减少请求次数和 ...
字体库（阿里巴巴矢量图标库）使用两三坑
众所周知,"微软雅黑" 是个炸弹,不敢碰.上网一查,有个"思源黑体",免费,好看,就它了! 字体库有两种使用方法: 本地使用一.下载字体库推荐地址:字体天下 ...
微信小程序引入iconfont字体图标（阿里巴巴矢量图标库）
微信小程序怎么引入iconfont字体图标由于微信小程序线上的资源限制了各种接口安全域名,所以在小程序里如果想使用iconfont字体图标就会稍有不同,其实只需要把平时的iconfont字体图标远 ...
三种方式在HTML使用阿里字体图标--iconfont阿里巴巴矢量图标库
好久没用到阿里巴巴的图标,突然要用到就发现不会用了,只会导出png格式的图标png了= = 目录 1.字体图标方法一.本地使用通过类名使用阿里矢量图标 1.把图标添加入库 2.把图标添加到项目 3. ...
微信小程序引入外部矢量图标（阿里巴巴矢量图标）
1.显示效果 2.实现步骤进入阿里巴巴矢量图标库搜索想要的矢量图标并加入购物车,点击右上角购物车将图标添加至项目更改项目设置将字体格式设置为TTF Base64 点击下载至本地在微信小程序 ...
支持哪些格式的图标_免费矢量图标素材资源网站，您一定会有需要（建议收藏）...
做设计.自媒体的朋友们,以及脑图爱好者,一定有过到处找矢量图标资源的经历,现在为大家推荐几个免费的矢量图标素材资源网站,对提高生产力很有帮助. 一.Iconfont-阿里巴巴矢量图标库链接:http ...
vue-cli引入iconfont图标（阿里巴巴矢量图标库）
官网:iconfont-阿里巴巴矢量图标库 1.上官网搜索需要的图标,依次"添加入库" 2.点开右上角购物车,将所有图标"添加至项目"(已有项目/新建项目) 3 ...
Win11自定义摆放图标 Windows11自定义摆放图标的设置方法
部分网友电脑安装了win11系统后想要对电脑桌面图标位置进行不一样的调整,下面就和大家讲讲电脑桌面图标位置如何修改吧,不会的小伙伴就继续往下看吧.更多windows教程,可以参考小白一键装机网 1.在 ...
html表格添加排序图标,bootstrap-table 自定义排序图标
bootstrap-table 修改排序图标一.修改bootstrap-table.js 1.在表头插入span元素,根据是否启用表格排序添加class='both'(为排序箭头做准备) 2.将re ...

Bootstrap 字体图标和自定义矢量图标

一、Bootstrap 字体图标

二、自定义icon图标库阿里图标库：https://www.iconfont.cn/

Bootstrap 字体图标和自定义矢量图标相关推荐

最新文章

热门文章