css伪元素 content 插入 '\xxx\'

Question

看到别人 可以用这个方法插入特殊符号 显示图标效果 ；
我也学下，但是显示的内容

全部 ‘XXX’ 都是这样子？为什么？ 应该不是浏览器问题 我都看到别人网站的效果了 都是utf-8

Answer 1

你字体文件引入了吗，这需要配合字体文件来写

//字体文件引入并使用

@font-face {
  font-family: "my-icons";
  src: url('../fonts/iconfont.eot?t=1511177886258'); /* IE9*/
  src: url('../fonts/iconfont.eot?t=1511177886258#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/...') format('woff'),
  url('../fonts/iconfont.ttf?t=1511177886258') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('../fonts/iconfont.svg?t=1511177886258#iconfont') format('svg'); /* iOS 4.1- */
}

[class*=" my-icon-"],
[class^=my-icon-]{
    font-family: 'my-icons' !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    vertical-align: baseline;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
.my-icon-xinzeng:before { content: "\e6bb"; }

.my-icon-bianji:before { content: "\e600"; }

.my-icon-shanchu:before { content: "\e610"; }

Answer 2

Font Awesome了解一下～