html - 如何将字体很棒的图标更改为线条很棒的图标

标签 html css icons

我创建了一个类

.image-upload .image-edit input + label:after {
    content: "\f030";
    font-family: 'FontAwesome';
    color: #757575;
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
}

我需要更改相机图标(字体很棒到线条很棒)

我试过了

.image-upload .image-edit input + label:after {
    content: "\&#xf368";
    font-family: '"Line Awesome Free"';
    color: #757575;
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
}

但它不起作用

这是 HTML 表单

                    <form action=""#>
                        <div class="text-center">
                            <div class="avatar-upload">
                                <div class="avatar-edit">
                                     <input name="input_file" type="file" id="profile-pic-upload" />
                                    <label for="profile-pic-upload"></label>
                                </div>
                            </div>
                        </div>
                    </form>

最佳答案

label:after {
content: "\f030";
font-family: "Line Awesome Free";
color: #757575;
position: absolute;
top: 10px;
left: 0;
right: 0;
text-align: center;
margin: auto;
  }

此代码是正确的,但您还必须添加 font-weight: 900;

关于html - 如何将字体很棒的图标更改为线条很棒的图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59641441/

相关文章:

javascript - 从同一页面中嵌入的另一个 iframe 更改 iframe 源时出现问题

html - 如何在不支持 Flexbox 的情况下使用 x*y 网格拆分视口(viewport)(整个宽度和高度)

css - 火狐 3.5 和 3.6 : Unable to style <address> if it contains an <ul>

javascript - Bootstrap 始终保持背景可见

android - 在启动画面中更改图标大小

java - 调整工具栏图标的大小

html - 在 Chrome 中隐藏 HTML 时间输入字段上的图标

javascript - 如果段落中只有一行,如何隐藏/显示 'more' 按钮

html - Flexbox 响应问题中的图像

c# - 如何在 C# 中为我的程序可执行文件创建图标?