search

star7th / showdoc

ShowDoc is a tool greatly applicable for an IT team to share documents online一个非常适合IT团队的在线API文档、技术文档工具
https://www.showdoc.com.cn
Other
12.19k stars 2.18k forks source link

菜单栏图标icon是否可以替换？ #268

Closed bbqtk closed 6 years ago

bbqtk commented 6 years ago

都是邮件的icon,看起来好奇怪，能否在创建菜单的时候，自己选择icon呢

star7th commented 6 years ago

其实我也想换个图标。但试了很多发现不好看。有好的欢迎推荐下。

bbqtk commented 6 years ago

要不然就选十个左右的icon展示给用户看，让他们可以选，要不然真的感觉怪怪的，感觉showDoc是走的简约风，多这一个功能应该还行~~~0 - 0

star7th commented 6 years ago

哪十个呢，有推荐的话可以推荐下

conanliuhuan commented 6 years ago

作者使用了vue+element-ui来实现的，所以偷懒的使用了element-ui里面的图标。文件夹图标使用了一个信封，感觉好古怪。 推荐作者引入免费的fontawesome来作为图标库。可以轻松地插入和找到很多想要的图标。例如搜一下folder，就可以找到引入此图标的代码了：https://fontawesome.com/

star7th commented 6 years ago

@conanliuhuan 引入fontawesome的体积超大的，为了一个图标而引入不太划算

conanliuhuan commented 6 years ago

Fontawesome5的图标库是使用JS引入的。连字体图标都省了，600多k吧。比以前的一大堆字体图标小了非常多了

star7th commented 6 years ago

@conanliuhuan 有办法单独剥离单个图标吗？600多k还是太大。因为showdoc原来的静态文件已经不小了，增加半M是个不小的负担，尤其是移动端访问

conanliuhuan commented 6 years ago

如果是安装包大小敏感的话，我建议你使用CDN。虽然单独剥离一两个图标在未压缩的JS里面是可以操作的：直接打开JS，你可以看得到有一个icon对象，里面很清晰的显示了图标名称和图标锚点。不过JS版本的问题是对IE9有兼容性问题（至少我最近的项目是遇到了）。所以如果你确实对安装包很敏感，并且使用的图标只是1~2个，那么引入整个库确实是不划算的，这种情况我建议你使用内联svg来解决这个问题。就可以想要什么图标手动下载和插入了。只是页面写起来会非常难看。 P.S.小小的建议：你真的需要找个朋友帮你做一下界面上的设计……

wingmeng commented 6 years ago

在 www.iconfont.cn 上新建一个图标项目，从海量图标里挑选中意的图标若干加入到该图标项目，然后就可以使用了，提供3种方式：

  1. Unicode 这个不考虑，用来兼容 IE6/7 的，直接无视之；
  2. Font class 点击“生成在线链接”按钮，得到一个在线 CSS 地址，直接在 showdoc 里引用就好；
  3. Symbol 这个是内联 svg 的解决方案，会得到一个在线 JS 地址，直接在 showdoc 里引用就好，需要注意的是 IE8 不支持（showdoc 应该不 care IE8 吧）。

如果担心在线地址失效，还可以把资源下载到 showdoc 项目中使用。

iconfont

star7th commented 6 years ago

@wingmeng 这个好像不错，抽时间试试

storyflow commented 6 years ago

el-icon-edit

qq 20180522175749

storyflow commented 6 years ago

哈哈，给ele提个issue吧

rocknpe commented 6 years ago

qq

我给改成这样了，看着更符合逻辑

storyflow commented 6 years ago

@rocknpe 自己搭建的，自己改下就好了

star7th commented 6 years ago

@rocknpe 这个图标的意思是文档。其实也不太符合逻辑。按理说单页使用这个图标才合理，目录用不好。

rocknpe commented 6 years ago

@star7th 是因为我没找到文件夹的图标，只能用这个代替了哈哈哈哈哈哈哈哈哈哈哈哈哈哈

star7th commented 6 years ago

图标已换 image

rocknpe commented 6 years ago

@star7th 图标哪找的

star7th commented 6 years ago

什么设计素材之类，逛的时候碰巧看到的。

Zuo Shen notifications@github.com于2018年6月7日 周四下午3:38写道：

@star7th https://github.com/star7th 图标哪找的

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/star7th/showdoc/issues/268#issuecomment-395323557, or mute the thread https://github.com/notifications/unsubscribe-auth/ACGTrgJgY48heDvIvsUaaSkeApJbOB-mks5t6NhqgaJpZM4T7P5z .

bbqtk commented 6 years ago

干得漂亮~,我更新了最新的代码，重新打包了，可是怎么还是小邮件的icon

bbqtk commented 6 years ago

明白了，我是直接将整个 /var/www/html/ 目录挂载出来的，所以镜像更新了，但是又被覆盖了