如何创建徽标来表示文本文件？

Question

我如何构建一个徽标来告诉用户他们将要点击这样的视频、文本或测验？

我如何构建星标和视频点击按钮以及文本文件徽标？

谢谢

Answer 1

您可以找到各种具有免费徽标的网站，我喜欢 https://www.iconfinder.com/ 它具有可免费下载的 PNG

如果您希望徽标可点击，我会在 HTML 中添加一个按钮并将图像包裹在元素内，如下所示：

<button> <img src="./image.png" /> </button>

Answer 2

首先你会想要使用 fontawesome 来获取图标。要获得它，您必须在 <head> 标签中使用 <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css"> 将其实现到代码中后，转到 https://fontawesome.com/ 并搜索所需的图标。使用 <i> 标签获取图标后。在您选择并决定了您想要的内容后，您可以从 javascript 开始和 html <button> 标签。那么让我举个例子 html <button onclick="cheese()"><i class="fa-thin fa-star">Click</i></button> 现在您可以将其添加到 html 页面的任何位置。现在用 js.

<script>
function cheese() {
window.open('https://google.com');
}
</script>

Answer 3

您可以使用带有 <svg> 标签的 svg。你可以自己画画！方法如下。

开始使用 SVG

在你的 svg 标签中，首先创建两个属性 width 和 height，它们将是你的 svg 尺寸。

<h1>A SVG!(Blank)</h1>
<svg width="200" h>

</svg>

一条路

路径是你通常想到的。通往城市的道路。一条通往山的小路。使用路径标签制作您的绘图。

命令

所有命令都存储在 d 属性中。

M = 移动到

L = 线托

H = 水平线到

V = 垂直线到

C =曲线图

S = 平滑曲线

Q = 二次贝塞尔曲线

T = 平滑二次贝塞尔曲线

A = 椭圆弧

Z = 关闭路径

以下是如何使用它们：

<h1>SVG Shapes!</h1>
<h2>Square</h2>
<svg width="100" height="100">
        <path d="M0 0 L100 0 L100 100 L0 100 Z">Sorry, but your browser doesn't support inline SVG.</path>
    </svg>

您可以在一个 SVG 中使用多个路径。

颜色！

使用路径标记中的属性 fill 可以使用 rgb 或 rgba 颜色更改颜色。

如何创建徽标来表示文本文件？

How do I create a logo to represent a file of text?

html

css

design-patterns

graphical-logo

responsive-design

开始使用 SVG

一条路

命令

颜色！