做一个自己的字符图标

最新推荐文章于 2023-06-12 09:39:56 发布

weixin_33858336

最新推荐文章于 2023-06-12 09:39:56 发布

阅读量377

点赞数

原文链接：http://www.cnblogs.com/dujuncheng/p/6139547.html

版权

bootstrap中的字符图标很好用，其实我们自己也可以做自定义的字符图标。

有一些字符，可以表示为图画，比如说微软的webdings字体。

下面来演示一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            font-family: "webdings";
        }
    </style>
</head>
<body>
    abcddsaf dfgd df
</body>
</html>

上面是很简单的html文件，body里面是敲了一些乱码，然后在style里面设置了font-family，结果却发现：

原来的字符变成了矢量的图画。

这样好玩的字体，我们也可以自己做出来，利用一个国外的网站www.icomoon.io, 这个网站是根据上传的svg图片生成字体。

准备好一个自己的svg图片，然后在网站上传，跟着网站的指引操作就好，

然后我们把字体下载，解压后，我们开始尝试着使用，因为下载下来的字体不是系统自带的，所以我们需要通过@font-face方法引入：

@font-face {
          font-family: 'icomoon';
          src:  url('icomoon.eot');
          src:  url('icomoon.svg') format('embedded-opentype'),
          url('icomoon.ttf') format('truetype'),
          url('icomoon.woff') format('woff'),
          url('icomoon.svg') format('svg');
          font-weight: normal;
          font-style: normal;
}

上面这一坨，不用自己写，下载下来的文件中有。

引入后，我们要开始用：

<style>
    .icon-dudu ::before{
     //写入内容，也就是字体中的被做成了图标的那个字符
  content:"\e900";

  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

<span class="icon-dudu"></span>

在浏览器中查看，是可以的：

但是，icon-* 字体往往会有很多图标组成的，如果每写一个图标，就要写类似于上面的一坨东西，很麻烦，我们通过下面的代码简化：

<style>
    [class^="icon-"],[class*=" icon-"]{
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

上面代码中，[class^="icon-"] 是匹配所有class以"icon-"开头的元素，但是也存在这样的情况，<span class="nav icon-dudu">，在这种情况下，我们就要通过[ class*=" icon-" ]来进行匹配，注意icon-是有空格的。

转载于:https://www.cnblogs.com/dujuncheng/p/6139547.html

weixin_33858336

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
做一个自己的字符图标

bootstrap中的字符图标很好用，其实我们自己也可以做自定义的字符图标。有一些字符，可以表示为图画，比如说微软的webdings字体。下面来演示一下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document<...
复制链接

扫一扫