在mui中引入自定义的字体图标

  字体图标可以到阿里巴巴矢量图上下载。

  将下载好的iconfont.ttf放进mui/dist/fonts里面。在mui.css中加入以下代码。

@font-face {
    font-family: Muiicons;
    font-weight: normal;
    font-style: normal;
    src: url(‘../fonts/icon.ttf‘) format(‘truetype‘);
}
<!-- 从阿里巴巴矢量图上选好图标下载下来后,会包括一下代码,引入后,就能使用了 -->
.icon-myshouye:before { content: "\e605"; }

.icon-myhuiyuan:before { content: "\e636"; }

.icon-myicon-:before { content: "\e64b"; }

.icon-mygaiicon-:before { content: "\e6cf"; }

<span class="mui-icon icon-myshouye"></span>    //这样就能调用了

  

原文地址:https://www.cnblogs.com/sujianfeng/p/8872572.html

时间: 2024-10-09 02:17:45

在mui中引入自定义的字体图标的相关文章

react-native中使用自定义的字体图标iconfont

iconfont图标库下载 可在 http://www.iconfont.cn 下载 下载完成后的目录中有字体文件: iconfont.ttf 拷贝字体文件 Android: 在 Android/app/src/main 目录下新建文件夹 assets/fonts/然后将iconfont.ttf文件拷贝到assets/fonts/目录下 使用 在下载的字体文件夹中有demo_unicode.html文件打开文件,在界面有显示图标以及对应的unicode码值,如 在Text标签中使用  并设置s

在自己的iOS程序中引入自定义字体

在网上找了下教程, 大多数都要获取字体文件的真实字体名,用起来比较麻烦. 在iOS7中,引入了UIFontDescriptor,so...可以这么写. UIFontDescriptor *fontdesc = [UIFontDescriptor fontDescriptorWithFontAttributes:@{UIFontDescriptorVisibleNameAttribute : fontName}]; [_richTextView.textStorage addAttributes:

扩展layui中的自带字体图标

项目中,虽然layui的字体图标库中已经有了1000多个图标了,但是也有时候不能满足我们自定义图标的需求,所以需要进行自定义,具体步骤如下: 1.在iconfont上找到自己喜欢的图标,也可以上传ui做好的图标,做自己喜欢的图标,加入购物车后导出字体图标: 2.打开icoMoon网站,将自己导出的图标中的svg文件和layui中的svg文件一起导入,然后selectAll. 3.generate字体,就可以使用啦: 原文地址:https://www.cnblogs.com/yangguoe/p/

vue引入iconfont阿里字体图标库以及报错解决

下载阿里的字体图标库文件,放在\src\assets\font文件夹下面. 安装style-loader,css-loader和file-loader (或url-loader)  ,记得--save-dev webpack的配置文件中添加: { test: /\.css$/, use:['style-loader','css-loader'] }, { test:/\.(ttf|eot|woff|woff2|svg)$/, use:['file-loader'] } 入口文件main.js引入

如何在photoshop等图像编辑软件中使用Font Awesome字体图标

1.首先要下载Font Awesome字体,解压后在fonts文件夹中找到FontAwesome.otf文件,双击安装字体.如下图: 2.重启你的photoshop或者其他图像编辑软件,确保字体被软件载入. 3.在Font Awesome4.2.0所有字体图标参考页面找到你想要的图标,(注意:是图标而不是class样式),将其复制.如图: 4.回到photoshop,将其粘贴在画布上,这时得到的是一个乱码选择"字体工具",选择这个字体图标,然后在字体选项中选择Font Awesome字

在vuejs 中使用Font Awesome字体图标

安装 npm install vue-awesome 引入 import Vue from 'vue' /* 在下面两种方式中任选一种 */ // 仅引入用到的图标以减小打包体积 import 'vue-awesome/icons/flag' // 或者在不关心打包体积时一次引入全部图标 import 'vue-awesome/icons' /* 任选一种注册组件的方式 */ import Icon from 'vue-awesome/components/Icon' // 全局注册(在 `ma

Android 如何在IDEA Eclipse 的UI Editor 中显示自定义的字体 Preview

将要显示的字体复制到.android-sdk/platforms/android-[Version]/data/fonts 文件夹下面 如:FontAwesome-Regular.ttf 在android-sdk/platforms/android-[Version]/data/fonts 下打开 fallback_fonts.xml 在最后加上: <family> <fileset> <file>[复制到文件加下的文件名,如:FontAwesome-Regular.t

Winfrom中如何使用Iconfont字体图标补充

1.参考技术文章:http://www.cnblogs.com/isaboy/p/csharp_Font_Awesome_window_form_icon.html 2.参考后主要纠结在图标的unicode在Winfrom中显示问题上. 阿里的这个字体默认打开demo_unicode.html页面后显示如上图显示. 示例1: 示例2: 需要将 &#x 替换成 \u 最终是\ue603

css中引入新的字体文件

@font-face {    font-family: 'fzltxhk';    src:url('fzltxhk.ttf') format('truetype')} 案例