Html 使用字体图标作为上传标签

我正在开发一个网站在Angular 2。我想通过点击FontAwesome中的图标上传图像，但我在这方面遇到了问题。当我使用标签时，我可以上传图片，但现在使用字体图标时，我不能

我现在所拥有的： 图片{ 边界半径：200px； 宽度：200px； 高度：200px； 背景尺寸：240px； 边框样式：无； 边框：2件纯黑； 大纲：无； 光标：指针； } 铅笔{ 位置：绝对位置； 左边距：85像素； 利润上限：85px； 字体大小：50px； 颜色：fff； 可见性：隐藏； 不透明度：0； 光标：指针； 转换：不透明度.2s，可见性.2s； } 上传输入{ 位置：绝对位置； 不透明度：0； z指数：-1； 文本对齐：左对齐； }

---

你试过把你的图标贴在标签上吗？ 我喜欢用Ember.js

<input type='file' (change)="readUrl($event)"id="uploadinput">
<label for="uploadinput">
  <i class="fa fa-pencil-square-o" for="uploadinput" id="pencilicon" aria-hidden="true"></i>
  <span>{{uploadLabel}}</span> 
  <!-- This is then switched to file name -->
</label>

---

如果您的方法已附加到具有z索引-1的输入，现在不可能单击它

将z索引更改为999，然后单击圆的上边框

---

您的方法应该在单击圆圈时运行，而不是输入。

您必须将字体库包含到页面中，并给出相应的图标，如：

请参阅下面的代码片段，以获取您需求的示例和演示

输入[type=file]。不可见{ 显示：无； } 输入[type=file].novisible+label{ 宽度：200px； 高度：200px； 边界半径：50%； 边框：2个实心999； 显示：内联flex； 证明内容：中心； 对齐项目：居中； }

---

上传您是否尝试过引导，使用它很容易没有尝试过会发生什么，控制台中是否有错误？你能举一个有效的例子吗，我没有看到这个图标？我没有发现任何错误，我可以在我的程序中看到这个图标，但在jsfiddle.netI中看不到。我应该把change=readUrl$事件移到i标签上吗？试试这个，谢谢。单击中的方法是做什么的？当您单击o时，它们会在包含文件的元素上单击事件。简单有效：简单地说试试这不是一个好方法。你应该向OP和社区解释你的答案。

input[type="file"] {
  position: absolute;
  left: -9999%;

  & + label {
    // your label style
  }
}