如何让一个字体很棒(喜欢/不喜欢)的图标可以用回车键点击？
要让一个字体很棒的图标可以用回车键点击，可以通过以下步骤实现：
- 使用字体图标库：选择一个合适的字体图标库，如Font Awesome、Material Icons等。这些库提供了一系列矢量图标，可以通过CSS样式来引用和显示。
- 引入字体图标库：在HTML文件中引入字体图标库的CSS文件。可以通过CDN链接或本地文件引入。
- 创建图标元素：在HTML文件中创建一个元素，如
<i>或<span>，用于显示字体图标。 - 添加CSS样式：为图标元素添加合适的CSS样式，包括字体图标库提供的类名。这些类名通常以
fa-或mdi-开头，具体根据所选字体图标库而定。 - 设置回车键点击事件：使用JavaScript为图标元素添加回车键点击事件。可以通过监听键盘事件，在按下回车键时触发相应的操作。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="path/to/font-awesome.css">
<style>
.icon {
/* 添加字体图标库提供的类名 */
/* 示例为Font Awesome的类名 */
/* 可根据所选字体图标库进行调整 */
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 24px;
}
</style>
</head>
<body>
<div class="icon" tabindex="0" onkeypress="handleKeyPress(event)">
<!-- 添加字体图标库提供的图标类名 -->
<!-- 示例为Font Awesome的图标类名 -->
<!-- 可根据所选字体图标库进行调整 -->
<i class="fas fa-heart"></i>
</div>
<script>
function handleKeyPress(event) {
if (event.keyCode === 13) {
// 在这里执行回车键点击图标后的操作
console.log("图标被点击了！");
}
}
</script>
</body>
</html>在上述示例中，我们使用了Font Awesome字体图标库，并创建了一个带有回车键点击事件的心形图标。你可以根据需要替换字体图标库和图标类名，以及在handleKeyPress函数中添加自定义的操作。
请注意，由于要求不能提及特定的云计算品牌商，因此无法提供与腾讯云相关的产品和链接。
相关·内容
我在我的主页()的顶部有4个字体很棒的社交媒体图标，上面有FB，LinkedIn，Google+和YouTube的超链接。但是点击它们什么也不做。右键单击并在新选项卡中打开可以正常工作。如何让这些图标正确链接？顺便说一下，在鼠标悬停时，Font Awesome图标上也有旋转动画。谢谢你的帮助。
浏览 2提问于2014-12-10得票数 0
在Yii2的最新更新中，字形图标不再正确显示。我想转到字体很棒的图标普遍。 如何在一个地方更改所有GridView实例的ActionColumn输出？
浏览 16提问于2020-08-01得票数 0
我尝试在Haml中使用图标字体，但似乎找不到一种方法来转义&，这样它就只是一个&而不是&。
图标字体允许您使用具有data-icon="“属性的HTML实体。在HTML中，甚至在Haml文件中，如果我只做一个直接的HTML链接，工作起来就像黄油一样流畅。
然而，由于我正在学习Haml，所以我想看看这里是否有人愿意推荐最好的方法来实现这一点。
这是一个发生的例子。
这是原始的Haml：
%a(href='/posts' data-icon="&" aria-hidden='true')
它
浏览 1提问于2012-06-27得票数 2
回答已采纳
当我点击单个的字体图标(6个图标中的1个)时，它的颜色就会从灰色变成橙色，就像它应该的那样。我还想确保一次只有一个很棒的字体图标可以是橙色的。所以如果我点击另一个图标，以前是橙色的现在是灰色的，而我刚才点击的是橙色的。我一直在努力让这一切进行下去，任何提示都将非常感谢。 import React, { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
export default function FontAwesomeIcons
浏览 39提问于2019-07-18得票数 2
回答已采纳
2回答
我在带有<i>的a href中有一个字体很棒的图标target='_blank'项，但是只有文本是可点击的；单击图标会打开一个新的about:blank选项卡，而不是实际的链接。
<a href="..." class="not-light" target="_blank" style="display: block; ">
<i class="fa fa-android"></i> »
</a>
我如何使图标也可点击？
例如，单击
浏览 2提问于2015-04-25得票数 2
回答已采纳
我正在考虑开始使用这种图标作为字体的技术，因为它看起来很棒。但我似乎不知道如何使它改变颜色悬停的链接。这里有一个让你玩的小提琴：
正如您将看到的，当您在上悬停一个像“警告”这样的文本时，文本会变成蓝色，我也希望图标/字体也变成蓝色。
有人知道怎么做吗？
谢谢。
浏览 1提问于2012-04-06得票数 2
回答已采纳
6回答
我无法让字体很棒的图标与LitElement一起工作，因为CSS样式不会穿透自定义元素的阴影边界。
是否可以在LitElement中使用字体、图标或其他图标？
浏览 1提问于2018-05-15得票数 8
回答已采纳
1回答
这是一种在图标字体中使用字体连接的趋势。图标名作为连接存储在字体文件中。
优点是:不需要为每个图标创建css类，而且html代码更短。
所以你可以写
<i class="icon">arrow-left</i>
而不是
<i class="fa fa-arrow-left"></i>
哪一种版本的浏览器性能更好？(在第一个示例中，CSS文件不包含其他类，在第二个示例中，字体没有任何连接)。
可能比这两者都有更好的性能：
<i class="icon"></i
浏览 8提问于2021-10-13得票数 1
我有一个表，单击时我正在进行排序。我有一个附加到它的指令，我在单击时动态地更改属性data-order="desc"，因此它可以是asc或desc。表头点击时会发生变化。
<th scope="col" [appSort]="dataSource$" (sortObservableEmitter)="test($event)" data-order="desc" data-name="firstname">first name
</th>
现在我想在我的
浏览 8提问于2021-06-10得票数 0
回答已采纳
我想使用此示例中所示的船舶字体棒极了图标
然而，现在它们显示在下面的图标
让我知道如果有任何方法来显示旧的字体很棒的图标。
浏览 12提问于2019-11-29得票数 1
3回答
我想把click事件绑定到一个很棒的字体图标上。然而，图标本身是不可点击的，只有当我插入额外的文本时，该文本才会被绑定。
如何绑定图标本身？
<span class="icon-star">
only this text is clickable, the icon itself is not
</span>
<script type="text/javascript">
(function($) {
$('span.icon-star').on('click', functi
浏览 0提问于2012-09-10得票数 3
回答已采纳
我刚刚按照更新管理器的建议，将Intellij (Java )从idea-IU-162.2228.15升级到IDEA 171.3780.107(下载文件夹名称)。现在我想知道，在我看来，UI是丑陋的。我更喜欢这个想法的用户界面-162.2228.15。
idea的UI -162.2228.15：
idea的“丑陋”(我的观点;) UI -IU-171.3780.107：
这是新的UI还是我的系统中的错误？我正在使用Ubuntu 16.04。如果这是一个错误，我如何才能修复它，如果不是，我如何才能得到旧的UI？
编辑：
坦克呼叫侏儒。我已经解决了图标问题。但是，字
浏览 6提问于2017-03-23得票数 2
回答已采纳
我要在我的网页上找到这个图标，这是我在找到的
但是，当HTML提供给我时：
<span class="glyphicon glyphicon-pencil"></span>
显示此图标：
如何获得第一个铅笔图标而不是第二个铅笔图标？
ADDENDUM:<span class="glyphicon glyphicon-home"></span>给了我：
增编：我再次下载Bootstrap并将字体文件复制到我的字体目录中，但是仍然得到了错误的图标：
浏览 0提问于2014-12-18得票数 1
1回答
我找到了下面的HTML代码
<i data-toggle="tooltip" class="icon-ok-sign" data-original-title="File not detected"></i>
在上
他们为什么要使用？
如何获取" icon -ok-sign“图标的路径？
如何通过Chrome浏览器菜单项"Inspect Element“找到图标路径？
浏览 0提问于2013-06-18得票数 0
回答已采纳
3回答
我是使用html，css3和jquery。我想在jquery中使用字体很棒的图标。但我不知道如何在Jquery中使用字体强大的图标。
字体图标：
<i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i>
代码：
<div class="display-icon">
<i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i>
&
浏览 1提问于2016-04-16得票数 3
回答已采纳
我有一个标签里面有一个字体很棒的标签。有时它不工作，当我使用字体可怕的图标，并需要尝试3或4次，以使它的工作。我该怎么办？
$(".confirm-delete").click(function(e) {
e.preventDefault();
let id = e.target.dataset.id;
Swal.fire({
title: 'Perhatian!',
text: "Apakah Anda yakin untuk menghapus pengisi jabatan ini?",
icon: &#
浏览 4提问于2022-04-05得票数 -1
1回答
修订后
我的自定义图标字体不是在iOS 5上的Mobile中呈现的，我已经确认问题一定是在我的CSS上。
当使用由iOS生成的相应eot和woff格式时，字体在IE9 6和Safari、Chrome、Firefox和IE9的桌面版本上工作得很好
@字体
我目前正在使用以下简化的@font-face声明(SASS)：
@font-face
font-family: 'Boundless'
src: asset-url('boundless.ttf', font) format('truetype')
font-weight: norma
浏览 1提问于2012-10-08得票数 2
回答已采纳
2回答
用svg替换字体很棒的图标
、、、、
我想用和svg替换一个字体很棒的图标。
例如，如果css类是svg，如何更改它才能使用具有相同形状square.svg的svg文件
浏览 0提问于2018-09-20得票数 1
1回答
我正在尝试让一个丑陋的文件上传按钮看起来像一个漂亮的字体，很棒的图标。 这是我到目前为止所知道的： <div class="col-12 col-md-4">
<button type="button" class="btn btn-round mt-0 mb-0 uploadMediaTrigger" data-toggle="modal" data-target="#uploadMedia" rel="tooltip" data-placement="top&
浏览 17提问于2019-01-10得票数 0
我试着在我的android Application.Ive中使用字体很棒的图标，我想在strings.xml文件中使用各种图标的unicode，但是当我运行我的应用程序时，我得到了这个
我做错了什么？
代码
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
LayoutInflater mInflater = (LayoutInflater) context
.getSystem
浏览 0提问于2014-11-06得票数 0
我正在试着给这组很棒的字体图标来点击(这样当我点击它们时，我就会被引导到我想要的页面) <i class="fas fa-chart-line"></i>
<i class="fas fa-utensils"></i>
<i class="fas fa-newspaper"></i>
<i class="fas fa-user"></i>
<i class="fas fa-sign-out-alt">
浏览 21提问于2019-04-22得票数 1
2回答
如何在输入占位符中添加字形图标？
、、、、
请参阅-
<div class="right-inner-addon ">
<input type="search"
class="form-control"
placeholder="" />
</div>
我希望字形图标在输入文本框中显示为占位符。但它不会渲染。就像我放了一个很棒的字体图标的十六进制代码一样，它呈现出来。
如何让它在字形图标中工作(不需要引入任何新的标记，如span或我只是为了显示图标，如
<i class=
浏览 2提问于2017-02-27得票数 1
1回答
字体很棒的图标不显示，它们显示方框而不是图标
我正在尝试制作一个营销页面的原型，我正在使用bootstrap和新的字体很棒的文件。问题是，当我尝试使用一个图标时，所有的图标都会呈现在页面上的一个大方块中。
浏览 1提问于2013-11-29得票数 1
5回答
想让字体更漂亮的图标更薄
、、、
我在使用字体很棒的图标，但问题是它们有默认的字体重量。我想让它再薄一点。但它不起作用
我的html代码
<span class="fa-stack fa-lg fa-5x color-red">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-trophy"></i>
</span>
我的css代码
.fa-trophy{
font-weight:l
浏览 0提问于2015-02-17得票数 33
回答已采纳
1回答
我试图用字体很棒的“图标”来切换dijit树中的图标(特别是那些与dijitFolderClosed对应的图标，应用于树中父节点的dijitFolderOpened类)。当图标实际上是图像文件时，切换所显示的图标很容易--我只需更改getIconClass()返回的类。
然而，字体-令人敬畏似乎是通过插入伪元素来工作的，我很难让它与dijit一起工作。图标节点是img元素，虽然一些像这样的方法看起来很有前途，但是由于它们没有content属性而不能在img标记上工作。
有什么好的选择，使字体-可怕的工作，作为dijit树图标？img标记看起来可能像建议的那样混乱，或者我可以使用replaceC
浏览 1提问于2015-02-04得票数 2
回答已采纳
我正在尝试创建一个网站，其中我有这个按钮，每次你点击它，一个新的预先填写的电子邮件将弹出。我知道如何链接电子邮件，但有没有办法让我每次点击按钮时，它都是我预先填写好的随机电子邮件？
这是我现在的代码：
<li><a href="mailto:?"><i class="fa fa-envelope"></i></a></li>
var diffEmails = [
// (code deleted off here because
// I didn't wa
浏览 3提问于2020-07-17得票数 2
8回答
这里有没有人给字体很棒的图标添加工具提示？
我有，但似乎找不到向图标添加工具提示的指南。
<header>
<!-- icons for settings, change pwd and list of active sessions -->
<div id="menuIcons">
<i class="fa fa-cog"></i>
<i class="fa fa-user"></i>
<i class="fa fa
浏览 10提问于2016-01-15得票数 63
回答已采纳
在我的Vue 3项目中，我需要使用一些字体很棒的图标，但并不是所有的图标都很明显。但是，如果我加载图标作为网页字体，它加载所有图标的所有信息。
如果我使用图标作为SVG，我就失去了使用图标作为字体的好处。例如:调整字体大小、颜色等。
在角度上，我可以使用<fa-icon ...>标签来使用像这样的图标。
我如何才能加载使用过的图标，但仍然保持字体行为的好处？
浏览 13提问于2022-08-10得票数 0
我有一个使用JHipster生成的网页应用程序，所以它在UI端有AngularJS，图标的字体也很棒。
我有几个页面显示表格中的数据，也支持对各种列进行排序。但是，列标题上显示的排序图标并不能直观地判断列是升序排序还是降序排序。而且我不认为这会因为点击而改变。
如何将这些图标更改为更好的图标，如用于降序排序的长向上箭头和用于升序排序的长向下箭头。现在，我在TH元素中使用以下代码
<th jhiSortBy="name"><span>Name</span> <fa-icon class="grid-icon" [
浏览 0提问于2019-02-14得票数 1
我试图让一个YouTube视频暂停并再次使用YouTube API播放。当在播放图标和暂停图标之间单击时，我使用了一些字体很棒的图标来toggleClass。到目前为止，我可以让视频暂停，但当点击播放图标恢复播放时，它没有触发事件，我不完全确定为什么？到目前为止，我认为这可能与onPlayerStateChange()有关，但我不知道它是如何直接检查该事件的。
我现在拥有的是：
$( ".playback" ).click(function() {
$(this).fadeOut("fast", function() {
$(this).toggl
浏览 0提问于2017-04-28得票数 0
回答已采纳
2回答
如何在活动中添加浮动视图
、、、
我构建了一个包含一些图标的SideBar菜单，当单击其中一个图标时，我需要在栏旁边弹出一个视图，里面有一个视图。
我的问题是如何将此视图添加到不在栏中的任何视图的顶部。
只是为了澄清，这是我的布局，让SideBar显示在屏幕上。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
浏览 0提问于2011-01-27得票数 0
回答已采纳
1回答
我试图使用字体可怕的许多方面的web项目，所以有一个问题，如何添加新的SVG图标到字体可怕的css文件。我的开发环境是带有Visual 2012的ASP，操作系统是windows 10。是否有任何清晰的说明或手册来添加SVG图标，自己绘制的字体很棒？非常感谢。
浏览 1提问于2018-04-13得票数 1
回答已采纳
3回答
我正在尝试在自己编写的checkbox组件中动态地呈现令人敬畏的字体图标。当我在点击一个带有字体的图标时，它并没有更新。我试着将渲染移到单独的函数中，并尝试使用react-fontawesome，但都没有用。状态正在更新，但是在html中，字体很棒的图标是相同的svg代码。
...
state = {
checked: this.props.checked
}
toggleCheck = () => {
this.setState({ checked: !this.state.checked });
};
render () {
const iconUnchecked
浏览 53提问于2018-04-18得票数 9
回答已采纳
我制作了unity游戏，我需要图标。
我认为字体很棒的图标是最好的。
如何获取这些图标的.png文件？
我不能把css放在unity游戏中。
我试着下载其他图标，但这些图片都不好。
浏览 0提问于2016-01-04得票数 13
回答已采纳
1回答
我建立了一个Chrome扩展，在网页上突出显示电话号码。除了高亮显示数字之外，我还想在每个数字的末尾添加一个图标。在这里，我有两个选择：
使用字体很棒的图标。
使用.ico文件。
有一个问题，字体可怕的图标。当我尝试字体令人敬畏的独角兽，他们是呈现为空白方块和与fa-电话类，没有任何渲染，可能是因为特定的网站可能不支持字体令人敬畏的图标。我不知道如何解决这个问题。
如果字体不是一个好主意，那么我想知道，如何在.ico文件中添加<span>。
浏览 5提问于2017-09-08得票数 2
我有一个很棒的字体图标，我正在试图弄清楚如何才能在每次点击相同的按钮时弹出多个预先填写的电子邮件。我到目前为止的代码：( HTML)
<li><a href=""></script>"><i class="fa fa-envelope"></i></a></li>
(Javascript中)
var diffEmails = [
''
''
''
浏览 4提问于2020-07-17得票数 0
我有以下div层：
<div class="iconfa-circle-blank"></div>
这给我展示了一个字体很棒的圆圈图标，我想在这个图标里面放一个字符字母，如下所示：
<div class="iconfa-circle-blank">A</div>
但是这个例子中的A字符不在div图标中。我想让它进入图标和居中。
有什么办法可以做到吗？
谢谢
浏览 2提问于2015-10-09得票数 0
回答已采纳
我想有一个输入选择与图像的选择作为一个选项(将定义自定义图标)。我可以把一个图片或图标的字体很棒。我试着把
<select>
<option><i class='fas fa-shopping-bag'/></option>
<select>
或者替换为图像，但都不起作用。字体很棒的字体，我用unicode尝试过，也不能工作，你知道怎么做吗？
谢谢
浏览 4提问于2018-07-15得票数 0
1回答
我在“资产”文件夹中添加了字体--令人敬畏的.tff文件，对strings.xml文件中的一些图标进行了初始化，更改了我将要使用的实体的字体--很棒，并且尝试使用字体--在按钮上很棒，而且它也能工作，但我对编辑文本也做了同样的操作，但是有字符串而不是图标。知道我能做什么吗？
浏览 4提问于2015-06-19得票数 0
回答已采纳
我不知道如何在我的节点网站中使用Lumos图标主题。我可以使用图标，但图标使用nox的轻主题和我的网站是黑暗的。我怎样才能使用字体很棒的黑色主题网站的灯光图标？
图标代码：
<i class="fa fa-bars"></i>
浏览 2提问于2022-02-28得票数 0
1回答
我尝试在一个页面的名为“ЗАКАЗв1КЛИК”的按钮前添加一个字体很棒的图标，但所有代码都不起作用：
JS代码，嵌入在页面上
<script>
jQuery(document).ready(function(){
jQuery("input#quick_buy_910_button").prepend('<i class="fa fa-cart-plus" aria-hidden="true"></i>');
});
</script>
感谢任何人的帮助！
浏览 0提问于2018-10-28得票数 0
我正在创建一个网站，在那里我有几个字体很棒的图标。我现在希望为每个图标创建一个带状背景。我怎么才能找到正确的像素大小的这种字体-可怕的图标？
浏览 0提问于2017-03-02得票数 1
回答已采纳
6回答
我正在使用字体可怕的图标按钮，我需要有一个图标的禁用状态。我可以让它看起来像禁用按钮使用Bootstrap禁用类，但它是可点击的。有没有什么方法可以让你不能点击？
这是我的HTML代码：
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class='btn btn-primary disabled' disabled>
浏览 0提问于2019-01-14得票数 3
2回答
我有一个字体很棒的图标
<i class="fa fa-angle-up fa-3x custom-close" id="proyect-close"></i>
可点击：
$('#proyect-close').click(function(){
$('#proyect').slideUp('slow', function(){
$(window).trigger('resize.px.parallax');
});
});
它在台式电脑上运行良好，但在移动电
浏览 1提问于2015-09-17得票数 0
我已经在我的wordpress.Now中创建了一个引导主题，我需要实现字体-太棒了，以获得脸书，推特图标。如何在bootstrap-template中链接字体很棒的css？
浏览 4提问于2013-12-05得票数 0
2回答
我的应用程序使用Vue 3。数据库中有10个人，每个人都应该显示在一张卡片上。用户可以将任何人添加到他最喜欢的列表中。这是渲染每个人的代码；
<div class="card" style="width: 18rem" v-for="(person, key) in people" :key="key">
<h5 class="card-title">
{{ person.name }}
</h5>
浏览 38提问于2022-08-01得票数 0
3回答
构建字体-令人敬畏的图标
、、、、
我会建立我自己的字体-可怕的图标集。特别是，我会构建一个字体的副本--它的所有功能都很棒，但只使用了一个图标子集。
此外，我非常感兴趣的是他们如何在字体文件夹中构建文件。在github上，我找到了这个，它包含所有svg图标。在ubuntu上，使用，我能够生成将svg文件作为输入，即字体文件，即使我并不满意。但除此之外，我不明白如何将这些文件与字体合并。
总之，如何使用我自己的svg文件创建自己的字体--非常棒的集合？
请不要说使用，或相似的，因为我想在我的本地机器上做，没有任何第三方服务。
浏览 5提问于2015-05-06得票数 9
3回答
如何将图标放置在图像上？
、、、
如何将FontAwesome下载图标放置在图像上？我希望它在图像的左下角。当用户点击下载图标时，会出现一个提示，询问他们是否想要下载图像。 如下所示： ? 相关代码 <!-- font awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9Rwh
浏览 26提问于2019-02-04得票数 24
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
