Bootstrap8 字体图标

最新推荐文章于 2023-07-13 21:47:53 发布

ZT黄

最新推荐文章于 2023-07-13 21:47:53 发布

阅读量415

点赞数

分类专栏：前端从0开始快速自学HTML/CSS/Javascript学习

本文链接：https://blog.csdn.net/weixin_44055272/article/details/90380597

版权

前端同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

从0开始快速自学HTML/CSS/Javascript学习

40 篇文章 0 订阅

订阅专栏

1 使用Bootstrap里的图标

在具体介绍Bootstrap的icon图标之前，我们首先要感谢glyphicons.com网站，因为Bootstrap框架中图标都是glyphicons.com这个商业网站提供的，并且免费授权给Bootstrap框架使用，所以大家可以放心使用在自己的项目当中。

1.1简单的使用图标

通常用一个空的内敛标签添加glyphicon glyphicon-图表名类。

<span class="glyphicon glyphicon-plus "></span>
<span class="glyphicon glyphicon-camera"></span>

1.2 作为普通的字体使用

1.我们要意识到这个图标是一个矢量图，和一个字一样，无论放大多少倍都不会失真。
2.可以为他添加文字的效果
（1）修改字体大小。font-size
（2）添加文本阴影。text-shadow
（3）修改文本颜色 .

<span class="glyphicon glyphicon-asterisk text-success" style="text-shadow: black 5px 3px 3px; font-size: 30px"></span>

2 使用更多的图标

我们这里以阿里矢量图为例，这里每天都有许多优秀的工程师为我们提供新的图标。

2.1 了解@font-face规则

1.@font-face规则，网页设计师再也不必使用的"web-safe"的字体之一。
（1）字体的名称，font - face规则：
font-family: myFirstFont;
(2)字体文件包含在您的服务器上的某个地方，参考CSS：
src: url(‘文件路径’).format(字体格式)
@font-face{
font-family:…
src:…
}
2.更多具体的属性
https://www.runoob.com/cssref/css3-pr-font-face-rule.html

2.2 自定义字体

https://www.iconfont.cn/webfont?spm=a313x.7781069.1998910419.d81ec59f2#!/webfont/index
阿里的这个网站为我们提供了各种字体
1.通过本地的字体文件。需要下载字体文件，并且使用font-face规则在css文件开头使用。
2.通过阿里的字体CDN，自动为我们写font-face规则的代码
在这里插入图片描述

2.2使用图标

https://www.iconfont.cn/help/detail?helptype=code&spm=a313x.7781069.1998910419.13.pCxKlU
先选择图标，添加到购物车
在这里插入图片描述
1.阿里自动生成CDN。
把cdn加进去，指定一个类，使用这个类就可以使用对应的字体了。然后在span标签里使用unicode。这个Unicode码是自动生成的。

    <style>
        @font-face {
            font-family: 'aliicon';  /* project id 1201601 */
            src: url('//at.alicdn.com/t/font_1201601_nlzkpsk3w8.eot');
            src: url('//at.alicdn.com/t/font_1201601_nlzkpsk3w8.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_1201601_nlzkpsk3w8.woff2') format('woff2'),
            url('//at.alicdn.com/t/font_1201601_nlzkpsk3w8.woff') format('woff'),
            url('//at.alicdn.com/t/font_1201601_nlzkpsk3w8.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_1201601_nlzkpsk3w8.svg#iconfont') format('svg');
        }
        .icon{
            font-family: aliicon;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div>这是一个外部标签<span class="icon">&#xe608;</span></div>