自定义字体与iconfont字体图标

1、自定义字体

<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			@font-face{
				font-family: 'kkk';					//	字体样式1的名称
				src:url(SnellRoundhand.ttc);		//字体包的地址	
			}
			@font-face{
			font-family:"www";						//	字体样式2的名称
			src:url(JDFQUKONG.ttf);
			}
		</style>
	</head>
	<body>
		<p style="font-family:kkk;">小猪佩</p>
		<p style="font-family:www;">nice</p>
	</body>
	</html>

2、iconfont字体图标

  • Unicode引用 --------html特殊字符

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<style>		
    		@font-face {font-family: "iconfont";
    	  src: url('iconfont.eot?t=1562481047740'); /* IE9 */
    	  src: url('iconfont.eot?t=1562481047740#iefix') format('embedded-opentype'), /* IE6-IE8 */
    	  url('iconfont.woff?t=1562481047740') format('woff'),
    	  url('iconfont.ttf?t=1562481047740') format('truetype'), 
    	  /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    	  url('iconfont.svg?t=1562481047740#iconfont') format('svg'); /* iOS 4.1- */
    }
    	</style>
    </head>
    <body>
    	<p style="font-family: iconfont ">&#xe673;</p>
    </body>
    </html>
    
  • Symbol引用 -------------js

<html lang="en">
<head>
	<script src="iconfont.js"></script>
</head>
<body>
	<svg aria-hidden="true">
 		 <use xlink:href="#icon-touxiang"></use>
	</svg>
</body>
</html>
  • Font class引用 ------------------伪元素(css特殊字符)
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>					//也可以用写好的<link rel="stylesheet" href="./iconfont.css">
		@font-face{
			font-family: 'iconfont';		
			src:url(iconfont.ttf);				//这里为了简洁没有考虑兼容性等问题
		}
		.icon-icon_camera:before {
	  	content: "\eb91";
	}
	.iconfont{
		font-family: iconfont;
	}
	</style>
</head>
<body>
	<p class="iconfont icon-icon_camera"></p>
</body>
</html>

这里附个图
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
步骤如下: 1. 在阿里iconfont官网上选择所需图标,添加到购物车中,并下载对应的图标字体文件。 2. 将字体文件复制到项目中的一个合适的目录下,比如 `src/assets/fonts`。 3. 在项目中安装 `@iconify/react` 和 `@iconify/icons` 包,用于渲染图标。 ``` npm install @iconify/react @iconify/icons --save ``` 4. 在 `webpack.config.js` 文件中配置字体文件的加载器,以及 `less-loader` 和 `css-loader` 的配置。 ``` const IconfontWebpackPlugin = require('iconfont-webpack-plugin'); module.exports = { module: { rules: [ { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ { loader: 'file-loader', options: { outputPath: 'fonts' } } ] }, { test: /\.less$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'less-loader', options: { lessOptions: { modifyVars: { 'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`, 'icon-font-path': '"../assets/fonts/iconfont"' } } } } ] } ] }, plugins: [ new IconfontWebpackPlugin({ resolve: { extensions: ['.tsx'] } }) ] }; ``` 其中,`IconfontWebpackPlugin` 是用于自动将 `@iconify/icons` 中的图标转换成 React 组件,并导出到指定目录的插件。 5. 在代码中使用图标: ``` import { Icon } from '@iconify/react'; import userIcon from '@iconify/icons-ant-design/user'; const MyComponent = () => { return ( <div> <Icon icon={userIcon} /> </div> ); }; ``` 其中,`userIcon` 是从 `@iconify/icons-ant-design` 包中导入的,可以替换成其他需要使用的图标。`Icon` 组件会自动根据图标名称找到对应的字体文件,并渲染出图标
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值