icons 相关问题

图标是图形用户界面中使用的小象形图,用于补充向用户呈现文本信息。

如何更改CTkInputDialog中的图标

我正在制作我的软件,刚刚遇到了 CTkInputDialog 的问题。我想要在输入对话框上显示我的图标,但没有这样的属性可以帮助我。 我试图检查文档,但可以...

回答 1 投票 0

Visual Studio 22 中 C++ 程序的设置图标问题

我使用 Visual Studio 22 作为 IDE 编写了一个 C++ 程序,我正在尝试为该程序设置一个图标。当我指定图标的路径时,它在 Visual Studio 中工作正常。然而,一旦...

回答 1 投票 0

在我的 VS Code 扩展中,如何使用操作添加装订线图标?

我正在开发 VSCode 扩展,需要向装订线图标添加操作。现在我正在添加装订线图标 const documentDecorationType = vscode.window.createTextEditorDecorationType({

回答 1 投票 0

如何在node js中导入boxicons

我有 Node js Express 应用程序,我已经安装了 boxicons 节点包, $ npm install boxicons --save boxicons 包安装在节点模块中,但我不知道如何正确导入它......

回答 3 投票 0

如何为我的Windows应用程序创建高质量的图标?

如果您运行的 Windows 具有较高的 DPI 设置,您会发现桌面上的大多数应用程序图标看起来很糟糕。甚至一些引人注目的应用程序图标(例如 Google Chrome)看起来也...

回答 8 投票 0

如何将漂亮的图标放在div中居中?

我在屏幕中间居中放置了 3 个 div,每个 div 都有一个来自 fontawesome 的图标,但是有些图标(例如骰子和代码)有点偏移,除了微笑。 (我认为这发生是因为......

回答 1 投票 0

SvgPicture 资源不起作用并显示“尝试将名称连接到已定义的名称,或定义名称”错误

我有一个Flutter项目,我制作了一个home.dart页面,想要将svg中的图标添加到AppBar,所以这是我的代码: 导入“包:flutter/material.dart”; 类 HomePage 扩展 StatelessWidget{ ...

回答 1 投票 0

窗口形式应用程序图标

如何将这个图标更改为另一个图标,我使用 Visual Studio 2017 制作这个窗口窗体应用程序。我只能更改任务栏上该应用程序的图标。 希望大家可以帮助我

回答 1 投票 0

Chrome 下 CSS 图标显示怪异

我在CSS中添加了一个子弹图标,代码如下: content: "\2022"; Firefox:它按预期工作 Chrome:有时,没有特殊原因,图标不会被解释,而是

回答 1 投票 0

如何更改鼠标悬停时图标的颜色

我需要添加什么代码才能使图标改变颜色,或者当鼠标悬停在图标上时更改为不同颜色的图标图像? i.pk-social-links-icon.pk-icon.pk-icon-twitter { 内容:网址(

回答 1 投票 0

C# 如何设置文件夹图标?

我使用 FilePathDialog.SelectedPath 获取文件夹的路径 我也知道图标的路径 但我不知道如何设置该文件夹的图标

回答 4 投票 0

如何在对话框左下角显示 16 x 16 的 IDI_INFORMATION 图标?

当你使用CTaskDialog时,你可以设置页脚图标,它是16 x 16。我想在我自己的对话框上做类似的事情: 目前我自己的对话框底部有一个静态资源。 我...

回答 2 投票 0

Python PyInstaller 并包含窗口图标

我已经使用 self.setWindowIcon(QtGui.QIcon('icon.png')) 设置了 PyQt 应用程序的图标,当我在 PyCharm 中运行代码时它工作正常。 接下来,我使用 PyIns 将我的应用程序转换为一个文件...

回答 3 投票 0

为什么我的 Flutter(飞镖)图标变成了奇怪的图标?

好吧,基本上,我有这个非常好的应用程序,好吧,没有任何实际原因,图标决定变成奇怪的图标,就像图像中的图标在此处输入图像描述一样 我上网查了一下,

回答 1 投票 0

我的 Ubuntu 22.04 上出现未知图标。它是什么? [已关闭]

最近,在我的 Ubuntu 22.04.4 LTS 上出现了一个新的未知图标(见下面的红色)。 有关单击、双击或右键单击的任何其他信息。现在红点出现在那里,就像写东西一样。

回答 1 投票 0

根据输入是否正确将图标放置在表单字段内

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Assignment 2 - Website Building</title> <style> body { box-sizing: border-box; font-family: sans-serif; } #login-container { width: 460px; margin: 0 auto; } form label, form input { width: 100%; box-sizing: border-box; } form input { padding: 8px; } form label { font-weight: bold; } form div { margin: 16px 0px; } .invalid { border: 2px solid red; } .valid { border: 2px solid green; } .error-message { color: red; margin-top: 8px; } .success-message { color: green; margin-top: 8px; } </style> <script src="https://kit.fontawesome.com/dde5f4aaa2.js" crossorigin="anonymous"></script> </head> <body> <div id="login-container"> <form id="login-form"> <div> <label for="username">Username:</label> <input id="username" type="text"> <span id="username-error" class="error-message"></span> <i class="fa-solid fa-check" style="color: #008d63;"></i> <i class="fa-solid fa-exclamation" style="color: #ed0202;"></i> </div> <div> <label for="password">Password:</label> <input id="password" type="password"> <span id="password-error" class="error-message"></span> <i class="fa-solid fa-check" style="color: #008d63;"></i> <i class="fa-solid fa-exclamation" style="color: #ed0202;"></i> </div> <input type="submit" value="Login"> </form> <div id="error-messages"></div> </div> <script> document.getElementById("login-form").addEventListener("submit", function (event) { event.preventDefault(); // Prevent form submission // Reset previous validation styles document.getElementById("username").classList.remove("invalid"); document.getElementById("password").classList.remove("invalid"); document.getElementById("username").classList.remove("valid"); document.getElementById("password").classList.remove("valid"); document.getElementById("error-messages").innerHTML = ""; document.getElementById("username-error").textContent = ""; document.getElementById("password-error").textContent = ""; // Get input values var username = document.getElementById("username").value.trim(); var password = document.getElementById("password").value.trim(); var errors = []; // Validate username and password document.getElementById("username").classList.toggle("invalid", username === "" || username !== "new_user"); document.getElementById("username").classList.toggle("valid", username === "new_user"); if (username === "") { document.getElementById("username-error").textContent = "Please, enter username"; errors.push("Username is required."); } else if (username !== "new_user") { document.getElementById("username-error").textContent = "Please, enter valid username"; errors.push("Invalid username."); } document.getElementById("password").classList.toggle("invalid", password === "" || password !== "123456789"); document.getElementById("password").classList.toggle("valid", password === "123456789"); if (password === "") { document.getElementById("password-error").textContent = "Please, enter password"; errors.push("password is required."); } else if (password !== "123456789") { document.getElementById("password-error").textContent = "Please, enter valid password"; errors.push("Invalid password."); // Display error messages if (errors.length > 0) { var errorMessageHTML = "<ul class='error-message'>"; errors.forEach(function (error) { errorMessageHTML += "<li>" + error + "</li>"; }); errorMessageHTML += "</ul>"; document.getElementById("error-messages").innerHTML = errorMessageHTML; } else { // Successful login document.getElementById("username").classList.add("valid"); document.getElementById("password").classList.add("valid"); document.getElementById("error-messages").innerHTML = "<p class='success-message'>Successful login!</p>"; } } }) </script> </body> </html> 我需要什么: 所以基本上我需要表单来分别显示复选标记和 x 图标,具体取决于表单的输入是否正确/不正确。这些图标需要位于右侧的表单字段中,我设法找到如何将它们放入结构中,但我不知道如何将它们放入表单中并在表单没有输入时隐藏它们。 我尝试过的: 尝试使用 css 中的位置,但无法做到正确 脚本文件中有很多错误,我全部删除了。这是您更正后的代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Assignment 2 - Website Building</title> <style> body { box-sizing: border-box; font-family: sans-serif; } #login-container { width: 460px; margin: 0 auto; } form label, form input { width: 100%; box-sizing: border-box; } form input { padding: 8px; } form label { font-weight: bold; } form div { margin: 16px 0px; } .invalid { border: 2px solid red; } .valid { border: 2px solid green; } .error-message { color: red; margin-top: 8px; } .success-message { color: green; margin-top: 8px; } .inputField { display: flex; position: relative; } .inputField svg { position: absolute; right: 5px; top: 6px; } .hide { display: none; } </style> <script src="https://kit.fontawesome.com/dde5f4aaa2.js" crossorigin="anonymous"></script> </head> <body> <div id="login-container"> <form id="login-form"> <div> <label for="username">Username:</label> <div class="inputField"> <input id="username" type="text"> <svg id="check1" fill="#000000" width="22px" height="22px" viewBox="0 0 24 24" id="check" data-name="Line Color" xmlns="http://www.w3.org/2000/svg" class="icon line-color"><polyline id="primary" points="5 12 10 17 19 8" style="fill: none; stroke: rgb(3, 252, 61); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></polyline></svg> <svg id="close1" fill="#000000" width="20px" height="20px" viewBox="0 0 24 24" id="cross" data-name="Line Color" xmlns="http://www.w3.org/2000/svg" class="icon line-color"><line id="primary" x1="19" y1="19" x2="5" y2="5" style="fill: none; stroke: rgb(252, 3, 19); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line><line id="primary-2" data-name="primary" x1="19" y1="5" x2="5" y2="19" style="fill: none; stroke: rgb(252, 3, 19); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line></svg> </div> <span id="username-error" class="error-message"></span> </div> <div> <label for="password">Password:</label> <div class="inputField"> <input id="password" type="password"> <svg id="check2" fill="#000000" width="22px" height="22px" viewBox="0 0 24 24" id="check" data-name="Line Color" xmlns="http://www.w3.org/2000/svg" class="icon line-color"><polyline id="primary" points="5 12 10 17 19 8" style="fill: none; stroke: rgb(3, 252, 61); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></polyline></svg> <svg id="close2" fill="#000000" width="20px" height="20px" viewBox="0 0 24 24" id="cross" data-name="Line Color" xmlns="http://www.w3.org/2000/svg" class="icon line-color"><line id="primary" x1="19" y1="19" x2="5" y2="5" style="fill: none; stroke: rgb(252, 3, 19); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line><line id="primary-2" data-name="primary" x1="19" y1="5" x2="5" y2="19" style="fill: none; stroke: rgb(252, 3, 19); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line></svg> </div> <span id="password-error" class="error-message"></span> </div> <input type="submit" value="Login"> </form> <div id="error-messages"></div> </div> <script> document.getElementById("check1").classList.add("hide"); document.getElementById("check2").classList.add("hide"); document.getElementById("close1").classList.add("hide"); document.getElementById("close2").classList.add("hide"); document.getElementById("login-form").addEventListener("submit", function (event) { event.preventDefault(); // Prevent form submission // Reset previous validation styles document.getElementById("username").classList.remove("invalid"); document.getElementById("password").classList.remove("invalid"); document.getElementById("username").classList.remove("valid"); document.getElementById("password").classList.remove("valid"); document.getElementById("error-messages").innerHTML = ""; document.getElementById("username-error").textContent = ""; document.getElementById("password-error").textContent = ""; // Get input values var username = document.getElementById("username").value.trim(); var password = document.getElementById("password").value.trim(); var errors = []; // Validate username and password document.getElementById("username").classList.toggle("invalid", username === "" || username !== "new_user"); document.getElementById("username").classList.toggle("valid", username === "new_user"); if (username === "") { document.getElementById("username-error").textContent = "Please, enter username"; errors.push("Username is required."); } else if (username !== "new_user") { document.getElementById("username-error").textContent = "Please, enter valid username"; errors.push("Invalid username."); } if(username === "new_user") { document.getElementById("close1").classList.add("hide"); document.getElementById("check1").classList.remove("hide"); } else { document.getElementById("check1").classList.add("hide"); document.getElementById("close1").classList.remove("hide"); } document.getElementById("password").classList.toggle("invalid", password === "" || password !== "123456789"); document.getElementById("password").classList.toggle("valid", password === "123456789"); if (password === "") { document.getElementById("password-error").textContent = "Please, enter password"; errors.push("password is required."); } else if (password !== "123456789") { document.getElementById("password-error").textContent = "Please, enter valid password"; errors.push("Invalid password."); } if(password === "123456789") { document.getElementById("close2").classList.add("hide"); document.getElementById("check2").classList.remove("hide"); } else { document.getElementById("check2").classList.add("hide"); document.getElementById("close2").classList.remove("hide"); } if (errors.length > 0) { // Display error messages var errorMessageHTML = "<ul class='error-message'>"; errors.forEach(function (error) { errorMessageHTML += "<li>" + error + "</li>"; }); errorMessageHTML += "</ul>"; document.getElementById("error-messages").innerHTML = errorMessageHTML; } else { // Successful login document.getElementById("username").classList.add("valid"); document.getElementById("password").classList.add("valid"); document.getElementById("error-messages").innerHTML = "<p class='success-message'>Successful login!</p>"; } }) </script> </body> 对 CSS、Html 和脚本进行了更改。 HTML 更改 我在 html 中的字体有问题,所以我使用了 svg,如果你擅长字体,那么你可以使用字体,没有问题。 我已将输入字段和 svg(检查图标和关闭图标)全部包装在带有 inputField 类的 div 中。 在所有四个 svg(2 个用于用户名,2 个用于密码)中,都使用了 uniqueId,这在脚本代码中很有用。 CSS 更改 对于 inputField 已经给出了 flex 和相对位置。 对于 svg 来说,根据您的喜好给出了绝对值并给出了顶部和右侧。 隐藏以最初按照您的要求隐藏 svgs。 脚本更改 最初为所有四个 svgs 添加了 hide 类,以便它们被隐藏。 然后在 if 条件下,我检查用户是否输入了正确的通行证和用户名(如果他们输入了),然后添加隐藏类以关闭 svg 并从检查 svg 中删除隐藏类,否则只需执行相反的操作。 最后,如果检查 errorList 是否为空,您是否输入了应该输出的密码。

回答 1 投票 0

如何在视图中渲染visionOS图标?

我想在我的visionOS应用程序中包含一个关于页面,这应该包含应用程序图标。但是,图标的图像不会呈现。 我已经尝试使用此中建议的图像声明...

回答 1 投票 0

如何使用shopware 6的评论图标

我尝试使用评论图标,但似乎它不存在。 这不起作用: {% sw_icon '评论' %} 这有效: ...

回答 1 投票 0

如何改变悬停时png的颜色?

我在illustrator中做了一个“向下箭头”,并保存为透明背景的png。当我将它作为 img 放入网页时,它以原始颜色显示,这没关系。 我正在努力...

回答 7 投票 0

当您不使用 Xcode 构建时,如何设置 MacOS 应用程序的图标?

我创建了一个 Mac OS 应用程序。我正在 Ubuntu 上构建应用程序,无法使用 Xcode。当谈到为应用程序设置图标时,我不知所措。如何才能做到这一点? 这可能是...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.